How to Compress Images for the Web (Without Ruining Them)

Why image weight matters more than you think

Page speed is a ranking factor, a conversion factor, and a bandwidth bill. Google's Core Web Vitals punish slow Largest Contentful Paint — and the LCP element is usually a hero image. A 4 MB photo that could be 400 KB delays everything behind it on the connection, costs mobile users real money, and burns your hosting egress. The fix isn't exotic: most images on the web are simply saved at a far higher quality setting than any viewer can perceive.

The numbers are dramatic because perception is logarithmic: the difference between quality 100 and quality 85 is invisible at normal viewing sizes but routinely halves the file. The difference between 85 and 70 is barely perceptible and halves it again. Compression is the art of spending bytes only where eyes will notice.

Lossy vs lossless — the only distinction that matters

Lossy compression (JPEG, WebP, AVIF in their normal modes) discards visual information your eyes are bad at seeing — fine chroma detail, high-frequency noise — and the discarded data is gone forever. It's the right tool for photographs, where a 70–90% size reduction is normal and invisible.

Lossless compression (PNG, and the lossless modes of WebP/AVIF) re-packs the exact same pixels more efficiently — every pixel survives bit-perfect. It's the right tool for screenshots, logos, UI graphics and anything with text or sharp edges, but its savings have a hard mathematical floor: a well-encoded PNG might only shed a few percent, because there's simply no redundancy left to remove.

The classic mistake is using the wrong family: a photograph saved as PNG is typically 5–10× larger than it needs to be, and a screenshot saved as low-quality JPEG grows fuzzy halos around every letter. Match the format to the content first; pick a quality level second.

Picking a quality level: 85, 70, or 50

Three settings cover nearly every real use case. Quality ~85 (our High Quality preset) is for images that will be inspected closely — portfolio shots, product zooms, photography sites. Quality ~70 (Balanced) is the web's workhorse: for photos in articles, cards, and heroes, the difference from the original is effectively invisible at normal sizes, and files routinely land 50–80% smaller. Quality ~50 (Max Compression) is for thumbnails, previews, and chat — places where speed beats fidelity.

If you're unsure, compress at Balanced and look at the result at the size your visitors will see it — not zoomed to 400%. Judging compression at 400% zoom is like judging a billboard from six inches away; nobody views your images that way.

Why some images refuse to shrink

Run a stock photo from Pexels or Unsplash through a compressor and you may see savings of 0%. That's not a broken tool — it's an already-optimized source. Professional image platforms run uploads through aggressive encoders (typically mozjpeg with progressive scan and optimized Huffman tables), so there's nothing left to reclaim at the same quality level. Your options are honest ones: accept the file as-is, step down a quality tier, or resize the dimensions.

This is also why encoder choice matters. Our image compressor runs each format's reference encoder — mozjpeg for JPEG, oxipng for PNG, libwebp for WebP, libaom for AVIF — compiled to WebAssembly in your browser, so it can usually squeeze even pre-optimized files. A tool that uses the browser's basic canvas encoder simply cannot: it will either inflate the file or lie about it. A good compressor never inflates — if it can't beat the original, it should tell you so and keep your bytes.

When changing format beats compressing harder

Past a certain point, squeezing the same format harder just trades visible artifacts for modest savings — but switching to a modern format resets the whole curve. The same photo at the same visual quality is typically 25–35% smaller as WebP than as JPEG (JPG to WebP), and smaller again as AVIF. For photographic PNGs (screenshots of photos, camera images saved as PNG), converting to WebP (PNG to WebP) is worth more than any amount of lossless optimization — often a 5–10× reduction.

Every modern browser displays WebP and AVIF, so for web delivery the conversion is nearly free performance. Keep an original-format master for editing; ship the modern format.

Resize before you compress

Compression can't fix wrong dimensions. A 5472×3648 camera photo displayed in an 800-pixel-wide article slot wastes most of its pixels no matter how well it's encoded — the browser downloads 20 megapixels and throws 95% of them away. Resize to roughly the largest size the image will be displayed at (twice that for high-DPI screens), then compress. The two steps together routinely turn a 6 MB camera file into a 100 KB web asset that looks identical in place.