Image Optimization for the Modern Web

Start by shipping fewer pixels

The biggest image optimization mistake is exporting a giant source image and letting CSS shrink it to a tiny card. A 2000px image displayed at 400px still has to travel over the network and be decoded. Resize the asset to the largest display size you actually need.

Choose a modern format

WebP is a strong default for broad compatibility. AVIF can compress further, especially for photographic images. The right choice depends on your audience and your tooling, but both are preferable to sending oversized JPEG or PNG assets by default.

Use responsive images

Use srcset and sizes so the browser can choose an appropriate file for the viewport. A phone should not download the desktop hero just because the CSS later scales it down.

Do not lazy-load the LCP image

Your main above-the-fold image should be discoverable early and, when appropriate, use fetchpriority="high". Images below the fold are different: lazy loading them can save bandwidth and decoding work without delaying the first screen.

Reserve space to prevent layout shift

Set explicit width and height, or use aspect-ratio. The browser can then allocate space before the image arrives. That simple step is one of the easiest ways to keep CLS near zero.

An image checklist

• Resize to the largest actual display size.
• Use WebP or AVIF where practical.
• Provide srcset for responsive layouts.
• Prioritize only the true LCP image.
• Lazy-load below-the-fold media.
• Always reserve intrinsic dimensions.

Image optimization is not about chasing the smallest possible file. It is about delivering the right pixels at the right time and nothing more.