JPEG quality and chroma, read from real files
Two settings decide most of a JPG's size: the quality number, and how much colour detail is kept. Here is what each one does, measured rather than repeated.
Convert a PNGThe test picture
One picture was drawn for this note, 800 × 400 pixels: a red heading (“Quarterly results”, about 30 px tall) and a two-pixel red rule on white, a line of dark grey body text, and below them a smooth colour gradient with fine grain standing in for a photograph. As a PNG it is 291.6 KB. It was written as JPEG by this site's precision encoder — the same one the converter uses — at four qualities and three samplings.
The second figure in each cell is the colour error on the red strokes: the average difference, in levels out of 255, between the red-difference channel (Cr) of the written file and of the original, over the 2,872 red pixels. Lower is truer red.
| Quality | 4:2:0 · red error | 4:4:4 · red error | Greyscale (one channel) |
|---|---|---|---|
| 60 | 13.4 KB · 25.4 | 16.9 KB · 8.8 | 10.6 KB |
| 75 | 19.0 KB · 23.2 | 24.0 KB · 5.0 | 15.8 KB |
| 86 | 29.1 KB · 22.9 | 39.2 KB · 2.4 | 25.3 KB |
| 95 | 60.2 KB · 22.3 | 95.8 KB · 1.4 | 54.9 KB |
Measured on 31 October 2026. 1 KB is 1,024 bytes.
What the table says
- Quality is the size dial: from 60 to 95 the 4:2:0 file grows four and a half times, from 13.4 to 60.2 KB.
- Quality does not rescue thin colour at 4:2:0. The red error stays between 22 and 26 levels at every setting, because the colour was halved before any rounding happened.
- 4:4:4 costs about a third more bytes at quality 86 (39.2 against 29.1 KB) and cuts the red error almost tenfold, to 2.4 levels.
- On the gradient half — the photograph stand-in — the eye cannot see the halved colour, which is why cameras and most encoders use 4:2:0.
The rule that follows
For photographs, 4:2:0 at a moderate quality is the right trade. For anything with small coloured text, coloured lines or brand colours along hard edges, ask for 4:4:4 — and expect a larger file, or keep the PNG. The browser's own encoder does not let you choose (see the canvas encoder record); this site's precision encoder does, under Colour sampling in the Quality tab, and reads the sampling back out of the written file either way.