Image Optimization for Web: Every Technique You Need to Know

Image Optimization: The Single Biggest Performance Win

Images typically account for 60–70% of a webpage's total byte weight. Optimizing images is almost always the highest-impact performance improvement available. Optumio handles image optimization as part of their website performance service — ensuring images are never the bottleneck in Core Web Vitals scores.

Image Format Selection

JPEG: Best for photographs and images with many colours. Good compression with moderate quality settings (70–85% quality covers most use cases).

PNG: Best for graphics with transparency, logos, and images with text. Lossless — larger file size than JPEG for photographs.

WebP: Google's format — 25–35% smaller than JPEG at equivalent quality, supports transparency. Excellent browser support as of 2026.

AVIF: Newer format — even better compression than WebP. Growing browser support. Worth serving where supported with JPEG/WebP fallback.

SVG: For icons, logos, and illustrations. Vector format — infinitely scalable with tiny file size. Ideal wherever possible.

The HTML Picture Element

The picture element enables serving different image formats and sizes based on browser support and viewport width. Define multiple source elements (one for AVIF, one for WebP) and a fallback img element for browsers that support neither.

Responsive Images with srcset

The srcset attribute tells the browser you have multiple image sizes available and lets it choose the most appropriate one based on the device's pixel density and viewport width. Pair with sizes to give the browser layout context for smarter decisions.

Lazy Loading

The loading="lazy" attribute on img elements defers loading until the image is about to enter the viewport. Native browser support, no JavaScript required. Do not lazy-load above-the-fold images — those should load as early as possible.

Compression Tools

• Squoosh — Google's web-based image compression tool
• ImageOptim — Mac app for lossless compression
• Sharp — Node.js library for server-side optimisation

Design Agency implements image optimisation pipelines in all website projects — ensuring beautiful photography doesn't undermine site performance.