The eye is fooled — and JPG exploits it
Human vision perceives brightness far more finely than color. JPG turns this weakness to its advantage: it splits every image into one brightness and two color components and stores the color more coarsely than the brightness. That saves plenty of space without being noticeable in normal photos. The trick is called chroma subsampling — and it's mostly brilliant, until it isn't.
What the numbers mean
| Notation | Color resolution | Meaning |
|---|---|---|
| 4:4:4 | full | no subsampling, color as fine as brightness |
| 4:2:2 | half (horizontal) | one color value per 2 pixels across |
| 4:2:0 | quarter | one color value per 2×2 pixel block — the strongest saving variant |
4:2:0 is the secret standard: most cameras and JPG encoders use it because it saves invisibly on photos. For each block of four pixels there's then only one shared color value.
Why red text frays
The trick breaks down precisely at hard colored edges. A red letter on a white background has an abrupt color change — but with 4:2:0, four pixels share one color value. The edge gets "smeared" across the block, producing a dirty, often brownish fringe. Red is especially affected because it sits unfavorably in the color channels. The same happens with logos, diagrams, and colored UI text. It's related to general JPEG artifacts, but has this specific color cause.
The fix: the right format or 4:4:4
- Save graphics with text as PNG. PNG has no subsampling — every pixel keeps its full color. For screenshots, logos, and text graphics PNG is the better choice anyway, see Optimizing screenshots.
- If it must be JPG: choose high quality. Many encoders switch to 4:4:4 (full color resolution) automatically above a high quality level. The red fringe vanishes, the file grows a little.
- Consider more modern formats. WebP and AVIF can also store at full color resolution and are often smaller than a 4:4:4 JPG.
When you don't have to worry
With normal photos — landscapes, portraits, anything with soft color transitions — 4:2:0 is completely unproblematic and saves valuable kilobytes. Chroma subsampling only becomes an issue when hard color edges come into play. The rule of thumb matches the eternal format rule: photos tolerate JPG (with subsampling), text and graphics belong in PNG.
Frequently asked questions
Why does red text fray on my JPG?
Because of chroma subsampling. JPG stores color information more coarsely than brightness — usually one color value per 2×2 pixels (4:2:0). At colored edges, especially red on white, this causes visible smearing. Saving with 4:4:4 (full color resolution) fixes it.
What do 4:2:0, 4:2:2 and 4:4:4 mean?
The numbers describe how finely color is stored relative to brightness. 4:4:4 = full color resolution (no subsampling). 4:2:2 = half horizontal color resolution. 4:2:0 = half horizontal and vertical, i.e. one color value per 2×2 pixel block — the strongest saving variant and the default of many encoders.
Why does chroma subsampling work for photos but not for text?
Because the human eye perceives brightness far more finely than color. In photos with soft gradients the coarser color goes unnoticed. On hard colored edges — text, logos, graphics — it becomes visible because the color changes abruptly there.
How do I avoid the fraying?
Two ways: first, don't save graphics with colored text as JPG, use PNG (no subsampling). Second, if it must be JPG, export at high quality with 4:4:4 — many encoders switch to full color resolution automatically at high quality levels.