Every image editor has a quality slider. Every upload form states a limit in kilobytes. There is no reliable way to get from one to the other, and that gap is where an enormous amount of wasted time lives.
This guide explains what actually determines an image's file size, why a quality percentage cannot predict it, and how to hit an exact target without destroying the picture.
What a quality setting actually controls
JPEG compression works by discarding information your eye is unlikely to miss. It breaks the image into small blocks, describes each as a set of frequency components, and throws away the components carrying the least visible detail. The quality setting controls how aggressively it throws them away.
Crucially, it does not control how many bytes survive. That depends on how much detail was there to begin with. The same setting applied to different images produces wildly different files:
| Image | Quality 60 | Why |
|---|---|---|
| Portrait against a plain wall | ~40 KB | Large areas of flat colour compress almost to nothing |
| Forest scene | ~400 KB | Every pixel differs from its neighbour, nothing to simplify |
| Screenshot of text | ~180 KB | Sharp edges are exactly what JPEG handles worst |
A tenfold difference at an identical setting. This is why "save at 60%" is useless advice for meeting a 50 KB limit, and why manually dragging a slider is such a miserable way to spend an afternoon.
The three levers that matter
1. Pixel count, by far the biggest
File size scales roughly with the number of pixels. Halving both dimensions quarters the pixel count, and roughly quarters the file. Nothing else comes close to this for impact.
A 12-megapixel phone photo has 4000 × 3000 = 12 million pixels. If a form displays it in a 200-pixel-wide box, 11.9 million of those pixels are pure waste, and worse than waste, because compression has to spend its entire budget describing detail nobody will ever see.
This is the single most valuable thing to know: resize before you compress. The difference is not subtle.
| Approach | Result at 20 KB |
|---|---|
| Compress the 4000 × 3000 original | Heavy blocking; the face is barely recognisable |
| Resize to 600 × 450, then compress | Clean and sharp at the size it will actually be viewed |
2. Image complexity
Detail costs bytes. A plain background, soft lighting and simple clothing all produce a smaller file at the same quality. This is not something you control after the fact, but it is a reason a photo taken against a blank wall in even light compresses better than one taken in a busy room, quite apart from looking more professional.
3. Quality setting
The lever everyone reaches for first, and the one with the least range. Below about 40% the artefacts become obvious; above about 90% you are spending a lot of bytes on differences nobody can see. The useful working range is narrower than the slider suggests.
Why hitting an exact target requires searching
Since file size is an unpredictable function of quality, the only way to land on a specific number is to try, measure, and adjust. That is what everyone does manually, export, check, adjust, repeat, and it is a binary search performed badly and slowly.
Done properly it takes about a dozen attempts and a fraction of a second. Encode at a mid setting, measure the real byte count, and move up or down depending on whether it fits. Each step halves the remaining uncertainty. After ten or so, you have the highest quality that still fits the limit.
That last part matters more than it sounds. There is a large difference between a file that is under the limit and one that is just under it. If your budget is 100 KB and you deliver 12 KB, you have thrown away 88% of your allowance and the image looks it. Our image compressor deliberately targets just below the ceiling for this reason.
KB, KiB, and why limits are ambiguous
A small trap worth knowing. "KB" means either 1,000 bytes or 1,024 bytes depending on who wrote the software. So a "50 KB limit" might be enforced at 50,000 bytes or at 51,200, and portals genuinely differ.
The safe approach is to treat a maximum as the smaller interpretation and a minimum as the larger one. A file under 50,000 bytes satisfies a 50 KB ceiling either way. Our requirements database stores byte values chosen conservatively in both directions for exactly this reason.
Format changes everything
Before adjusting any setting, check you are using the right format. It has more impact than any amount of tuning:
- JPEG for photographs. It has a quality dial, so it can be tuned to a target. Nearly every portal requires it.
- PNG for screenshots, logos and line art, or when transparency is needed. It is lossless, which means there is no quality dial at all, the only way to shrink a PNG is to reduce its dimensions. A photograph saved as PNG can be ten times larger than the same photo as JPEG.
- WebP for your own website, 25–35% smaller than JPEG at the same visual quality. Not for official uploads; most validators reject it.
If you are struggling to get a photo under a tight limit as a PNG, that is the whole problem. Convert it to JPEG.
Re-saving degrades the image every time
JPEG is lossy, and the loss is cumulative. Open a JPEG, save it, open it again, save it again, each cycle discards a little more, and the artefacts compound. This is why a photo that has been through several rounds of editing looks noticeably worse than the original even at high quality settings.
Always go back to the original file rather than editing an already-compressed copy. If you need to make several changes, make them all in one pass rather than exporting between each.
The routine that works
- Start from the original. Not a copy that has already been compressed.
- Crop to the required shape, so nothing important is lost later.
- Resize to the required dimensions, this does most of the work.
- Convert to the required format, almost always JPEG.
- Compress to just under the limit, checking for a minimum as well as a maximum.
Do it in that order and compression is only ever working on pixels that matter. Do it in any other order and you throw detail away twice.