The Right Way to Reduce Image File Size Without Losing Quality
Resize, convert or compress — three different levers that all shrink an image, and why using them in the wrong order wastes the easiest win available.
· 3 min read
"Compress the image" is usually the first thing people reach for when a file is too large, but compression is only one of three independent ways to shrink an image — and it's often not the one that saves the most. Resizing and choosing the right format both come before it, and doing them in the wrong order means fighting for a few extra percent when a much larger win was sitting there the whole time.
Lever 1: resize — fewer pixels, before anything else
A photo taken on a modern phone is routinely 4000×3000 pixels or larger. If it's going to display at 800 pixels wide on a web page, roughly 94% of those pixels are being downloaded, decoded and thrown away by the browser's own scaling. This is almost always the single biggest lever: resizing to the dimensions you'll actually display at reduces the pixel count — and therefore the raw data — long before compression enters the picture.
Resize Image does this with the aspect ratio locked by default, so the image doesn't distort.
Lever 2: pick the right format
At the same visual quality, format alone changes file size substantially, because each one is built for a different kind of image content:
| Format | Best for | Why |
|---|---|---|
| JPG | Photos | Lossy compression tuned for continuous tones and gradients |
| PNG | Screenshots, logos, transparency | Lossless — exact pixels, but larger for photos |
| WebP | Almost everything | Modern codec, typically 25–35% smaller than JPG at equal quality, plus transparency support |
A screenshot saved as JPG often looks worse and larger than the same screenshot as PNG, because JPG's compression is built for photographic noise, not flat colour and sharp text edges. Convert Image switches between JPG, PNG and WebP without leaving the browser.
Lever 3: compress — the quality/size trade-off
Once the pixel count and format are right, compression is where you decide how much visual quality to trade for file size. JPG and WebP both use a quality slider (typically 0–100): the drop from 100 to 80 is usually invisible to the eye but can cut file size by half or more, while going below 60 starts to introduce visible blocky artefacts, especially around sharp edges and text.
Compress Image lets you compare the result against the original size before committing, so you can find the quality level where the savings stop being worth the visible loss.
A practical order of operations
- Resize to the dimensions you'll actually display — this is the free win.
- Convert to WebP unless you specifically need PNG's lossless transparency or the widest possible legacy support.
- Compress at a quality level around 75–85 and compare before/after.
Doing them in this order means each step operates on the smallest input possible, rather than compressing a needlessly large image and reaching only a fraction of the savings that resizing would have given for free.
One more case: embedding instead of hosting
Sometimes the goal isn't a smaller file at all, but no separate file — a small icon or logo embedded directly inside CSS or HTML as a data URL, avoiding an extra network request altogether. Image to Base64 handles that conversion and gives you the ready-to-paste CSS and HTML snippets, which only makes sense for genuinely small images — a data URL is roughly a third larger than the binary file it represents, since Base64 always expands data.