Image optimization

Images are the main source of page weight. Chosen well, they improve LCP without hurting CLS.

Updated

Pick the format

  • AVIF: best compression, well supported (Can I use).
  • WebP: very widely supported.
  • JPEG as photo fallback, PNG for flat art with transparency, SVG for logos and icons (minify with SVGOMG).

Compress

Lossy (Squoosh, cwebp, avifenc) or lossless when fidelity matters.

Serve the right size

<picture>
  <source type="image/avif" srcset="img-480.avif 480w, img-960.avif 960w" sizes="(min-width: 48rem) 48rem, 100vw">
  <source type="image/webp" srcset="img-480.webp 480w, img-960.webp 960w" sizes="(min-width: 48rem) 48rem, 100vw">
  <img src="img-960.jpg" width="960" height="540" loading="lazy" decoding="async" alt="Description">
</picture>

Documentation: responsive images - MDN. An image CDN (Cloudinary, Imgix, Sirv…) resizes and converts on the fly.

Load at the right time

Lazy loading for offscreen images, high priority for the LCP image, long caching for versioned files.