Image optimization

Images account for roughly 50% of a typical web page's weight. Optimising them is the single highest-impact change you can make for page speed.

Image formats for the web

WebP offers 25-35% smaller file sizes than JPEG at equivalent quality. It supports transparency (like PNG) and animation (like GIF). Supported in all modern browsers.

AVIF offers even better compression than WebP, typically 50% smaller than JPEG. Browser support is growing rapidly. Use it as a primary format with JPEG fallback.

JPEG remains the universal fallback. Use 85% quality for photographs. Below 60% produces visible artefacts.

PNG is best for images with transparency or sharp edges like logos. Never use PNG for photographs � the file sizes are unnecessarily large.

SVG is essential for icons, logos, and illustrations. SVGs are resolution-independent and typically smaller than raster alternatives.

Responsive images

Serve different image sizes for different screen widths using the srcset attribute on img tags. A 400px-wide image on mobile and a 1200px version on desktop prevents mobile users from downloading desktop-sized files.

Pair srcset with sizes to tell the browser which image to choose at each viewport width. The browser selects the optimal image automatically.

Lazy loading

Images below the viewport should load only when the user scrolls near them. Add loading=lazy to img tags for native browser lazy loading. This reduces initial page weight and speeds up first paint.