Images are the single biggest performance lever on almost every website. They average over 1MB of every 2MB page — and cutting them down is the fastest way to improve Core Web Vitals and SEO rankings.
I've spent the past few months obsessing over image compression (I built CompressFast to scratch my own itch). Here's the complete, ordered checklist I use on every project.
1. Resize first — it's the single biggest win
A 6000×4000 photo served to a 1200px-wide card is pure waste. Before anything else, resize to the largest size your layout actually displays.
Resizing alone cut my test image from 4.7MB to 1.1MB — a 77% reduction with zero quality change.
2. Pick the right format per image type
This is the mistake I see most often — using one format for everything.
- Photos → WebP (30–50% smaller than JPEG) or AVIF (another 30% smaller)
- Screenshots / UI → PNG lossless, or WebP lossless
- Logos / icons → SVG (vector, tiny, infinitely scalable)
- Animated GIFs → animated WebP (60–80% smaller)
3. Compress, don't just convert
Converting PNG → JPEG saves space, but then compressing that JPEG saves even more. Always run a compression pass after conversion. Quality 75–82% is the sweet spot for photos — visually indistinguishable from 100%.
4. Strip metadata
EXIF, GPS coordinates, camera model, editing software tags — all useless for web display and can be 10–30KB per file. Strip it.
5. Use lossless compression for text-heavy images
For screenshots, logos, and anything with sharp edges, lossless tools (like oxipng for PNG) shrink files 20–60% without changing a single pixel. Never run lossy compression on text — it creates ugly artifacts.
6. Lazy-load off-screen images
loading="lazy" (or loading="lazy" via next/image) stops below-the-fold images from blocking your LCP. Combine with width/height attributes to prevent layout shift (CLS).
7. Serve modern formats with fallbacks
Use the <picture> element to serve WebP/AVIF to modern browsers and JPEG as a fallback:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="...">
</picture>
Real numbers from my testing
A single 1920×1080 screenshot, compressed:
| Step | File size | Reduction |
|---|---|---|
| Original PNG | 2.1 MB | — |
| Resize + WebP 75% | 186 KB | 91% |
| Resize + AVIF 50% | 102 KB | 95% |
That 91–95% saving is the difference between a 4-second and a sub-1-second page load.
The privacy point most guides skip
Most online compressors upload your files to their server to do the compression. That means your (or your users') images are sitting on someone else's infrastructure. If you're compressing product shots, client work, or anything sensitive, use a tool that runs entirely in the browser — the file never leaves the device.
I built CompressFast exactly for this: browser-side compression, no upload, no account, batch up to 30 files, free. It also auto-detects the right format per image so you don't have to think about steps 2–5.
What's the biggest image optimization win you've found? Drop it in the comments.
Top comments (0)