Image Optimization: lazy loading formats WebP
Add loading=lazy to images, serve modern WebP and AVIF formats, use responsive images with srcset and sizes, and set explicit width and height to prevent layout shift.
Images Dominate Page Weight
The median web page is around 2MB — and images account for roughly half of that. Optimising images is the single highest-impact performance task.
Modern Formats: WebP and AVIF
WebP is 25-35% smaller than JPEG with similar quality, supported by all modern browsers. AVIF is even smaller (50% reduction) but slower to encode. Use both with fallback.
All lessons in this course
- Core Web Vitals: LCP FID CLS
- Lighthouse Audits and Scoring
- Image Optimization: lazy loading formats WebP
- Code Splitting and Lazy Routes