Performance
How to compress images for the web
Resize to the largest dimension actually displayed, convert to AVIF or WebP with a JPEG fallback, and serve responsive sizes with srcset. Most sites can cut image weight by 70% with no visible quality difference at all.
Before you start
- Your source images
- An image tool, or a build pipeline with sharp or squoosh
The steps
-
Step 1: Find the largest displayed size
Inspect the image in DevTools. If it renders at 800px wide, nothing above about 1600px is useful even on a retina screen.
-
Step 2: Resize the source
Down to that maximum. This alone is usually the biggest single saving.
-
Step 3: Convert to AVIF
Typically 50% smaller than JPEG at equivalent quality. Add WebP as a second source and JPEG as the fallback.
-
Step 4: Use the picture element
Sources in order — AVIF, WebP, then an img with the JPEG. The browser picks the first it supports.
-
Step 5: Generate responsive sizes
srcset with two or three widths and a sizes attribute describing the layout.
-
Step 6: Set width and height
On the img element, to prevent layout shift.
-
Step 7: Lazy-load below the fold only
Never the hero image — that delays your LCP.
-
Step 8: Write real alt text
What the image conveys, in a sentence. Decorative images get alt="" so screen readers skip them.
The order that matters
Resize before you compress. Compressing a 4000px image to 80% quality still leaves a 4000px image. Getting the dimensions right first is where most of the saving lives, and it is the step people skip.
Automate it in the build
Manual optimisation lasts until someone uploads a photo straight from a phone. A build step that converts and resizes on every deploy is the only version that holds up over a year.
The background behind this
Image SEO: findable images that do not wreck your page speed covers the reasoning in about 3 minutes — free, ungated, written from client work.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada, Ireland and Pakistan. These procedures are the ones I run on client work, written down rather than invented — including the ones where the honest answer is that the fix is not available on your current hosting.