Images typically account for 50-75% of a web page's total size. Optimising them is the single most impactful performance improvement you can make. Modern formats, responsive sizing, and intelligent loading strategies can cut image payload by 70% or more without visible quality loss. Here is how to approach image optimisation systematically.
Modern Image Formats: WebP and AVIF
JPEG and PNG have served the web for decades, but modern formats deliver the same visual quality at dramatically smaller file sizes. WebP, developed by Google, offers 25-35% smaller files than JPEG at equivalent quality and supports transparency (replacing PNG) and animation (replacing GIF). Browser support for WebP is now universal across all major browsers.
AVIF pushes compression even further, achieving 40-50% smaller files than JPEG. It excels particularly with photographic content, high-dynamic-range images, and images with fine gradients where JPEG produces visible banding. Browser support for AVIF has reached practical levels, with Chrome, Firefox, and Safari all supporting it. For maximum compatibility, serve AVIF with WebP fallback using the HTML <picture> element.
Responsive Images
Serving a 2000px-wide hero image to a mobile device on a cellular connection is wasteful. The srcset attribute lets you provide multiple image sizes, allowing the browser to choose the most appropriate one based on the viewport width and device pixel ratio.
Generate multiple sizes for each image based on your layout breakpoints:
- Small: 400-640px wide for mobile devices in single-column layouts.
- Medium: 768-1024px for tablets and two-column layouts.
- Large: 1200-1600px for desktop displays.
- Retina: 2x variants for high-DPI screens, but only where the quality difference is noticeable. Not every image needs a retina version.
Combine srcset with the sizes attribute to tell the browser how wide the image will be rendered at different viewport widths. Without sizes, the browser assumes the image is full-viewport width and may download an unnecessarily large version.
Lazy Loading and Priority
Native lazy loading with loading="lazy" defers off-screen images until the user scrolls near them. This is essential for pages with many images, such as product listing pages or blog archives. However, never lazy load images visible in the initial viewport — your hero image, logo, and any above-the-fold product images should load immediately.
For your Largest Contentful Paint (LCP) image, use fetchpriority="high" to signal to the browser that this image is critical. Preload it with a <link rel="preload"> tag if the image URL is known at page-load time. These signals can improve LCP by 200-500ms on slower connections.
Compression and Quality Settings
Image quality settings require balancing visual fidelity against file size. For most photographic content, a quality setting of 75-80% produces images that are visually indistinguishable from the original at typical viewing distances while being 40-60% smaller. For product photography where detail matters, 85% is a safer baseline.
Tools like Sharp (for Node.js), Squoosh (web-based), and ImageMagick (CLI) provide fine-grained control over compression. For Astro projects, the built-in astro:assets image service handles optimisation automatically at build time. For WordPress, plugins like ShortPixel process images on upload and serve optimised versions to visitors.
Layout Stability and CLS
Always specify width and height attributes on image elements. Without explicit dimensions, the browser cannot reserve space for the image before it loads, causing layout shifts (CLS) as images pop in. Modern browsers use these attributes to calculate the aspect ratio and reserve the correct space even before the image downloads.
At Born Digital, image optimisation is part of our standard build process, not an afterthought. We configure automated pipelines that convert, resize, and compress images at build time, ensuring every image served is optimally sized for its context. The performance gains are immediate, measurable, and directly impact both user experience and search rankings.