Image Optimisation: The Highest-Return Speed Work

Pick the right format

AVIF — smallest files at equal quality; excellent modern browser support.
WebP — the safe default, typically 25–35% smaller than JPEG.
JPEG — fallback for photographs.
PNG — only for images that need transparency and hard edges.
SVG — logos, icons and diagrams; scales infinitely at tiny size.
Never use animated GIFs for anything long; encode as MP4 or WebM instead.

Size before you compress

The largest saving is always dimensional. An image displayed at 800px wide should not be a 3000px original, regardless of format. Export at roughly double the display width for high-density screens and no more.

Then compress: quality 75–82 is visually indistinguishable for most photographs and can halve file size again. Strip EXIF metadata while you are there.

Responsive markup

<picture>
  <source srcset="hero-800.avif 800w, hero-1600.avif 1600w" type="image/avif" sizes="(max-width: 768px) 100vw, 800px">
  <source srcset="hero-800.webp 800w, hero-1600.webp 1600w" type="image/webp" sizes="(max-width: 768px) 100vw, 800px">
  <img src="hero-800.jpg" width="800" height="500" alt="Team reviewing server metrics" fetchpriority="high" decoding="async">
</picture>

Set fetchpriority="high" on the hero image and lazy-load everything below the fold — but never lazy-load the hero itself.

A sustainable workflow

1 Agree maximum dimensions per template with whoever adds content.
2 Automate conversion and compression at upload rather than relying on discipline.
3 Bulk-optimise the existing library once.
4 Serve images through a CDN with per-device transformation.
5 Audit the largest images quarterly — libraries drift back to heavy over time.

Frequently asked questions

Does image optimisation hurt quality?

Done properly, no. Most sites can cut image weight by 60–70% with no perceptible difference.

Do alt attributes matter for SEO?

Yes, for image search and accessibility. Describe the image's content and purpose rather than stuffing keywords.