Improve Image Delivery

Why It Matters

• Images are usually the heaviest assets on a page. Optimizing them provides the biggest single performance gain.
• WebP is supported by all modern browsers and is 25–35% smaller than JPEG at equivalent quality.
• AVIF offers even better compression (~50% smaller than JPEG) with growing browser support.
• Serving oversized images (4000px wide for a 400px container) wastes bandwidth and delays rendering, especially on mobile.

How to Fix It

1. Convert to WebP or AVIF. Use build tools, CDN image optimization, or server-side conversion to serve modern formats with JPEG/PNG fallbacks.
2. Use responsive images. Add srcset and sizes attributes so the browser downloads only the size it needs for the viewport.
3. Lazy load below-the-fold images. Add loading="lazy" to images not visible on initial load.
4. Compress with quality targets. A JPEG quality of 75–85 is usually visually indistinguishable from 100 but significantly smaller.
5. Set explicit width and height. This prevents layout shift while images load and lets the browser allocate the correct space.

Common Mistakes

• Serving 3000px images on mobile because the CMS uploaded the original without resizing.
• Using PNG for photographs — PNG is lossless and produces enormous files for photo content.
• Forgetting fallbacks — serving only AVIF without a WebP or JPEG fallback breaks older browsers.
• Lazy loading hero images — the main above-the-fold image should load eagerly for best LCP.