Almost every slow website I have been asked to look at has the same root cause: images that are five to ten times larger than they need to be. A photographer uploads a 4.2 MB JPG straight from a mirrorless camera into a blog post where it renders at 800 pixels wide. The browser downloads all 4.2 MB, throws away most of the detail while scaling it down, and the visitor on a train with two bars of signal gives up before the page paints.
The good news is that fixing this is not a trade-off between "fast" and "good looking". With the right settings you can usually cut 60-80% of the file size and nobody — including you, zoomed in — will spot the difference. Here is how that actually works, and how to do it in a couple of minutes with the Image Compressor.
Why compression does not have to hurt
Photographs contain far more information than your eye can resolve on a screen. JPEG and WebP encoders exploit this. They split the image into blocks, transform each one into frequency data, and then throw away the high-frequency detail your visual system barely registers — subtle noise in a blue sky, micro-texture in shadow, tiny colour shifts across a gradient.
The "quality" slider controls how aggressively that discarding happens. At quality 100 the encoder keeps almost everything, including invisible noise, which is why a maxed-out JPG can be bigger than the original. At quality 80 it discards a lot of data that you genuinely cannot see. Below about 55-60, the blocks themselves start to become visible: banding in skies, halos around hard edges, mushy text.
So the whole game is finding the point just before artefacts appear. For most photographs that lands between quality 70 and 85.
Step one: resize before you compress
This is the step people skip, and it is the single biggest win. Compression reduces the cost per pixel. Resizing reduces the number of pixels — and the saving is quadratic. Halving the width and height of an image removes 75% of its pixels before the encoder even starts.
Work out the largest size the image will ever be displayed at, then double it for high-density screens:
- Full-width hero banner: 1920-2560 px wide
- Blog body image: 1200-1600 px wide
- Product thumbnail or card: 600-800 px wide
- Avatar or logo: 200-400 px wide
Anything wider than that is pure waste. Use the Image Resizer first, then compress the result.
Step two: pick the right format
Format choice matters as much as the quality slider:
JPG — photographs and any image with smooth tonal variation. Excellent compression, no transparency support.
PNG — screenshots, logos, diagrams, anything with flat colour areas, sharp edges or transparency. PNG is lossless, so it never blurs text, but it is a poor choice for photos: a PNG photo is routinely five times the size of an equivalent JPG. If you have a photo saved as PNG, convert it with PNG to JPG.
WebP — the modern default. It typically produces files 25-35% smaller than JPG at matching visual quality, and it supports transparency, which means it can replace both JPG and PNG. Every browser released in the last six years supports it. Convert with Image to WebP.
If you only change one thing after reading this article, make it this: serve WebP.
Step three: compress and eyeball the result
Load the resized file into the Image Compressor, start at quality 80, and look at the output at 100% zoom. Pay attention to the places artefacts show up first:
- Large flat areas of colour — skies, walls, studio backdrops — where you will see banding
- Hard edges between light and dark, where you will see faint ghosting
- Any text baked into the image, which goes soft before anything else does
- Faces, especially skin gradients and hair
If it looks clean, drop to 70 and check again. If it still looks clean, keep the smaller file. If you see artefacts, step back up. Two minutes of this per image beats any preset.
What about "lossless" compression?
Lossless tools strip metadata and re-encode more efficiently without touching a single pixel. The saving is real but modest — usually 5-20%. It is the right choice for logos, UI assets, illustrations, and any image where absolute fidelity matters. For photographs, lossy compression at quality 75-85 will always win by a wide margin.
One easy lossless win: strip EXIF metadata. Camera and phone files carry orientation data, lens details, timestamps, and often GPS coordinates. That block can be tens of kilobytes, and the GPS tag is a genuine privacy leak when you publish a photo taken at home. The Image Metadata Remover clears it in one click.
A workflow that takes two minutes
- Resize to the maximum display width you actually need.
- Convert to WebP (or JPG if you must support something ancient).
- Compress at quality 80, inspect, and push lower if it still holds up.
- Strip metadata.
- Add
loading="lazy"to images below the fold and always set explicitwidthandheightattributes so the browser reserves space and your layout does not jump.
Common mistakes worth avoiding
Compressing the same file twice. Lossy compression is generational. Each save discards more data, and it never comes back. Always re-export from your original.
Trusting the CMS. Many platforms generate responsive variants, but plenty still serve your original at full size on mobile. Check with your browser's network panel — sort by size and look at what actually crossed the wire.
Compressing screenshots as JPG. Screenshots are full of text and one-pixel lines, exactly what JPEG handles worst. Keep them as PNG or lossless WebP.
Ignoring the total page weight. One 200 KB hero is fine. Twelve of them is not. Budget for the whole page, not per image.
Privacy note
Every tool linked in this article runs entirely inside your browser using the Canvas API. Your files are never uploaded to a server, which means you can safely compress client photos, unreleased product shots, screenshots containing internal data, or anything else you would not want sitting in a stranger's upload folder.
Start with the Image Compressor, and if you handle a lot of images, bookmark the Image tools category — resizing, cropping, watermarking, format conversion and colour picking all live there.