Why Red Text Blurs in JPEG 4:2:0 Compression
Compressing high-contrast red text using JPEG with 4:2:0 chroma subsampling causes severe visual degradation, characterized by color bleeding, dark halos, and a significant loss of edge sharpness. Because 4:2:0 subsampling reduces the horizontal and vertical resolution of color data by half, the sharp transitions between vibrant red glyphs and their backgrounds are blurred. This article explains the technical mechanics behind this artifact, why red is especially susceptible, and how to avoid it.
The Mechanism of 4:2:0 Chroma Subsampling
JPEG compression relies on the YCbCr color space rather than standard RGB:
- Y (Luminance): The brightness or grayscale information of an image.
- Cb (Chrominance-Blue): The difference between blue and luminance.
- Cr (Chrominance-Red): The difference between red and luminance.
Human vision has a much higher spatial acuity for variations in brightness (luminance) than for variations in color (chrominance). To reduce file size, encoders use chroma subsampling to discard color details while retaining full brightness details.
In a 4:2:0 subsampling scheme:
- Luminance (Y) is recorded at full resolution (a 1:1 pixel ratio).
- Chrominance (Cb and Cr) is downsampled by a factor of two both horizontally and vertically.
- A 2x2 block of four pixels shares a single pair of chrominance values.
Why High-Contrast Red Text Suffers
Pure red (RGB: 255, 0, 0) poses a specific challenge due
to how luminance is calculated:
\[\text{Y} \approx 0.299\text{R} + 0.587\text{G} + 0.114\text{B}\]
Because red contributes less than 30% to overall luminance, pure red has a low brightness value (\(\text{Y} \approx 76\)). Conversely, the chrominance-red component (\(\text{Cr}\)) is near its maximum.
When red text is placed on a white background:
- Luminance Contrast: The white background has a luminance value of 255, while the red text has a luminance of roughly 76.
- Chrominance Contrast: The white background has neutral chrominance, while the red text has extreme chrominance.
Because the fine boundaries of the text rely heavily on the Cr channel to distinguish the red characters from the background, reducing chrominance resolution via 4:2:0 subsampling drastically degrades the edge definition.
The Resulting Visual Artifacts
- Color Smearing (Chroma Bleed): Because one color sample is stretched over a 2x2 pixel grid, the red color extends beyond the sharp boundary of the letter, spilling over into adjacent pixels.
- Dark Halos and Ringing: When the low-resolution color data is combined with the high-resolution luminance data, the mathematical mismatch causes dark fringes or "halos" along the edges of the text.
- Loss of Legibility: Thin strokes, fine serifs, and acute angles are partially or completely washed out, making small red text appear smudged, jagged, and difficult to read.
How to Prevent the Issue
- Use 4:4:4 Subsampling: If saving as a JPEG is mandatory, configure the encoder to use 4:4:4 (no subsampling). This retains full chrominance resolution for every pixel, preserving crisp text edges.
- Use Lossless Formats: For graphics containing text, line art, or sharp contrast, use formats designed for graphic rendering such as PNG, WebP (lossless), or vector SVG.