How to Reduce Image File Size
There are only three levers, and most people reach for the weakest one first. Pulled in the right order they compound, and you can usually cut an oversized photo by 90 percent or more without anyone noticing.
The order that works
| Step | What it does | Typical saving | Quality cost |
|---|---|---|---|
| 1. Resize | Removes pixels the layout never uses | Up to 90%+ | None, scaling down |
| 2. Compress | Spends fewer bytes on the same pixels | 40–70% | Controlled by you |
| 3. Convert | Uses a more efficient encoder | 25–35% vs JPEG | Usually none |
The order matters because each step operates on the output of the last. Carefully compressing a 4000-pixel photo you are about to shrink to 800 pixels wastes the effort entirely, and the compression artefacts you introduced survive the resize.
Step 1: resize to the size it is displayed at
This is the step people skip, and it is the one that matters most. File size scales with pixel area, not width, so the maths is more dramatic than it feels:
4000 × 3000 = 12,000,000 pixels 800 × 600 = 480,000 pixels → 25× fewer pixels A photo straight off a phone, shown in a 800px-wide slot, is carrying about 96% more data than the page can display.
Target roughly twice the displayed width, which covers high-density screens without waste. If you do not know the displayed width, the website image checker reports the rendered size of every image on a live page, and natural vs rendered dimensions explains the gap. Then use the image resizer.
Step 2: compress what is left
Now that the dimensions are right, spend fewer bytes per pixel. For JPEG and WebP this is a quality setting, and the useful range is narrower than the 1–100 scale suggests:
- 90–100: barely smaller than lossless, rarely worth it.
- 75–85: the sweet spot. Large savings, no visible difference on typical photographs.
- 60–75: acceptable for thumbnails and backgrounds, starts to show on flat colour and text.
- Below 60: visible blocking and haloing around edges. Only for deliberate low-fidelity use.
Start at 80 and only move if you can see a reason to. Our compressor runs in your browser and shows the before and after size for each file, so you can judge the trade directly rather than guessing.
Reducing a JPEG specifically
JPEG has one property that changes how you should handle it: it is lossy on every save, not just the first. Decoding and re-encoding the same file repeatedly compounds the damage, and it is not recoverable.
- Always work from the highest-quality original you have, not from a copy you already compressed.
- Do the resize and the quality change in a single pass rather than saving in between.
- Do not re-save a JPEG at quality 95 hoping to preserve it. The detail is already gone; you are just making the file bigger.
- If the image is a screenshot, a logo, or anything with sharp text, JPEG is the wrong format entirely. Use PNG or WebP, where those edges stay crisp.
Step 3: convert the format
WebP is typically 25–35 percent smaller than JPEG at equivalent quality, and unlike JPEG it supports transparency, so it can replace PNG as well. Every current browser supports it. Keep a JPG or PNG fallback only if you genuinely need to serve very old software. Use the image converter for one-offs, and see image formats compared for where each format wins.
Sensible targets
| Image role | Reasonable width | Budget |
|---|---|---|
| Thumbnail | 300–400px | Under 30 KB |
| In-article image | 800–1200px | Under 150 KB |
| Full-width hero | 1600–2000px | Under 300 KB |
| Logo or icon | Vector if possible | Under 15 KB |
Treat these as budgets to design against rather than hard limits. A single 400 KB hero on an otherwise lean page is fine; twelve 400 KB images on one page is not.
Find out which images on your page are oversized, and by how much.
Scan a Page NowFrequently Asked Questions
How do I reduce an image file size?
Work through three levers in order. First resize it to the dimensions it will actually be displayed at, which is almost always the biggest win. Then compress it, trading a quality setting you control for bytes. Finally convert to a more efficient format such as WebP if the destination supports it. Doing them in that order avoids wasted effort.
How do I reduce the file size of a JPEG?
Resize first if the pixel dimensions are larger than needed, then re-save at a quality setting between 75 and 85. That range typically removes 40 to 70 percent of the file with no difference most people can see. Avoid repeatedly re-saving the same JPEG, because the format is lossy each time and the damage accumulates.
What is a good file size for a web image?
As a rough budget, keep ordinary content images under about 150 KB and full-width hero images under about 300 KB. These are guidelines rather than rules: what matters is that the page as a whole loads quickly, and images are usually the largest part of it.
Does reducing image size reduce quality?
Resizing does not, as long as you scale down rather than up, because you are removing pixels the display never had room for. Compression does trade quality for size, but the first 40 to 60 percent is usually invisible. Converting to a modern format often gives you size back at equal quality rather than costing you any.
Which reduces file size more, resizing or compressing?
Resizing, and not by a small margin. File size tracks pixel area, so halving an image’s width quarters its pixel count and typically its file size. Compression on an already correctly sized image usually gives 40 to 70 percent. That is why resizing comes first.
Checking images at scale?
Bulk-audit hundreds of URLs at once or hit a dimensions API from your own code.