Intermediate Performance

Image Optimization

Formats, compression, lazy loading, and responsive images.

Optimizing Images

Images are often the largest assets on a page. Optimizing them has massive impact on performance.

Modern Formats

WebP: 25-35% smaller than JPEG, wide support
AVIF: 50% smaller than JPEG, growing support
SVG: Vector graphics, infinitely scalable

Responsive Images

<img
  srcset="image-400w.webp 400w,
          image-800w.webp 800w,
          image-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800w.webp"
  alt="Description"
/>

Lazy Loading

<img loading="lazy" src="below-fold.jpg" alt="...">

Image CDNs

Automatic format conversion
On-the-fly resizing
Global edge caching
Examples: Cloudinary, Imgix, Vercel Image

Best Practices

Always specify width and height (prevents CLS)
Use loading="lazy" for below-fold images
Serve properly sized images
Use next-gen formats with fallbacks

Additional Resources