Reduce Image File Size Without Losing Quality
· 5 min read
The biggest saving comes from dimensions, not compression. An image displayed at 800 pixels but stored at 4000 carries twenty-five times the data it needs. Resize first, then convert to WebP for another 25-35%, then lower quality last. Doing only the third is why people are disappointed by how little they saved.
Large images are the single biggest cause of slow pages. Here is how to make them smaller without the result looking like it has been through a fax machine.
On this page
Three ways to make an image smaller, in order of effect
The biggest saving almost always comes from dimensions, not compression. An image displayed at 800 pixels wide but stored at 4000 is carrying twenty-five times more pixels than it needs, and no compression setting fixes that.
Second is format. WebP is typically 25–35% smaller than JPEG at matched quality. Third is the quality setting itself, which people usually reach for first and which has the least headroom.
- Resize to the size it is actually displayed at — the largest single win
- Convert to WebP — another 25–35% for free
- Then lower quality — useful, but the smallest of the three
Why dimensions dominate everything else
File size tracks pixel count, and pixel count is the width multiplied by the height. Halving both dimensions removes three quarters of the pixels before a single compression decision is made.
This is why the quality slider disappoints. Going from quality 90 to quality 60 on an oversized image might halve it; resizing that same image to the width it is displayed at can cut it by 95%. The slider is the last adjustment, not the first.
| Stored width | Pixels | Approximate size | Suitable for |
|---|---|---|---|
| 4000px | 12.0 MP | ~3.5 MB | Printing at A3 |
| 2000px | 3.0 MP | ~900 KB | Full-screen desktop |
| 1200px | 1.1 MP | ~340 KB | Full-width content image |
| 800px | 0.5 MP | ~160 KB | In-article image |
| 400px | 0.12 MP | ~45 KB | Thumbnail |
How small is small enough
For a full-width hero on a website, aim for under 200 KB. For a thumbnail or a product tile, under 50 KB. For an email attachment, whatever gets the whole message under the recipient's limit.
These are guidelines rather than rules. The real test is whether the image looks right at the size it is shown; anything below that is wasted bytes and anything above it is a visible compromise.
Retina screens and the 2× rule
A high-density display packs two or three physical pixels into each CSS pixel, so an image shown in an 800-pixel slot looks soft if it is stored at exactly 800. Storing it at 1600 and letting the browser scale down is the usual answer.
The counter-intuitive part is that a 2× image at a lower quality setting usually beats a 1× image at a high one, for a similar file size. Extra resolution hides compression artefacts, because each artefact is drawn at half the size.
Why this affects your search ranking
Largest Contentful Paint is a Core Web Vital, and on most pages the largest element is an image. If that image is four times bigger than it needs to be, LCP is measuring your oversized file rather than your server.
The effect is heaviest on mobile connections, which is where most traffic is. A 3 MB hero that feels instant on a desk is several seconds on a phone.
What not to do
Do not compress the same image repeatedly. Lossy compression is not idempotent — each pass discards more, and the artefacts compound. Always work from the original.
Do not convert a screenshot or a logo to JPEG. Hard edges and text are exactly what JPEG handles worst; the fringing around letters is immediately visible. Keep those as PNG or WebP.
Do not resize upward to fill a slot. Enlarging invents pixels that were never captured, producing a bigger file that looks worse than the original did.
Common questions
Will my images look worse after compression?
At quality 80 the difference is imperceptible at normal viewing sizes. Judge it at 100% zoom rather than as a thumbnail, and pay particular attention to flat areas like skies, where blocking shows first. For print, stay at 90 or above.
What's the difference between lossy and lossless compression?
Lossless packs the same pixels more efficiently, so the image is bit-for-bit identical — PNG works this way. Lossy discards detail the eye is poor at noticing, which is how JPEG and WebP reach much smaller files. Lossy loss is permanent.
Should I use WebP or JPEG for my website?
WebP wherever you can. Every current browser supports it and it lands 25–35% smaller than JPEG at matched quality. Keep a JPEG fallback only for email or software known to reject WebP.
Does FileCrisp upload my images?
No. Compression runs inside your browser using WebAssembly, so the files never leave your device. You can confirm it yourself in the browser's Network tab — nothing goes out while a file is processed.
Can I compress multiple images at once?
Yes. Drop a whole folder's worth in at once, compress them with the same settings so they stay visually consistent, and download the batch as a ZIP.
What's the maximum file size?
There is no imposed limit — no server is paying for bandwidth. The real ceiling is your device's memory, so very large originals may be slow on an older phone and fine on a laptop.
Why is my PNG still huge after compressing it?
PNG is lossless, so there is a floor below which it cannot go while remaining a PNG. For a photograph that floor is high. Converting to WebP or JPEG is what actually shrinks it — PNG is for logos, screenshots and transparency.
Should I resize or compress first?
Resize first, then compress. Compressing an oversized image spends quality on pixels you are about to throw away, and the discarded detail is gone for good.