Automate Image Performance Using ASTs - Learn With Jason

Explore techniques for automating image performance optimization in this 1 hour 43 minute video featuring Phil Hawksworth on Learn With Jason. Discover how to leverage Abstract Syntax Tree (AST) transformations to automatically generate multiple image sizes, implement lazy loading, and enhance overall website performance. Learn to create source sets, utilize the picture element, apply CSS blur effects, and implement intersection observers for efficient image loading. Gain insights into reducing image sizes, testing performance improvements, and understanding page cost implications. Access a demo and GitHub repository to follow along and apply these techniques to your own projects.

Introduction
Getting Started
Finding an Image
Image Performance Issues
Reduce Image Size
Create Source Sets
Testing
Page Cost
Picture Element
Cropping
Image Width
Lazy Loading
Changing Image Size
CSS Blur
Adding an Intersection Observer
Detecting Images