Image optimization without a library
Three rules that move 80% of an image budget without any code change beyond the markup.
Image optimization has gotten complex - responsive sources, AVIF support, automatic format selection. Most sites don't need a library. Three rules move 80% of the budget.
1. Compress the source
Most images on most sites are JPEG quality 95 when 80 would be visually identical at half the bytes. Run a one-pass conversion at quality 80 across every existing image. Smaller payload, no perceptible quality loss.
For new images, set the export at 80 by default. Only bump it for hero images that genuinely need the detail.
2. Set explicit width and height
Every image gets explicit width and height attributes set in the markup. Browsers reserve space, layout shift drops to zero, CLS scores improve.
This is one of the cheapest performance wins we know of. It's still missing from most sites we audit.
3. Use loading="lazy" below the fold
Native lazy-loading is supported in every browser that matters. Add it to images outside the initial viewport. The browser does the rest.
What we still don't reach for by default
Responsive image sets with srcset and sizes. Useful for hero images and a small handful of high-impact placements. Overkill for the rest of the site, where the bandwidth saved isn't worth the markup complexity.
90% of the gain is in the three steps above.