Why JPEG chroma subsampling can blur colored text edges

Separate brightness detail from color detail

A JPEG workflow can transform red, green, and blue values into a luma component and color-difference components. Because human vision is generally more sensitive to fine brightness structure than to fine color structure, an encoder may store chroma at lower spatial resolution. The final image keeps the same pixel dimensions, yet a bright edge can look relatively sharp while the color transition beside it appears softer.

The notation describes sampling relationships rather than overall quality. In common usage, 4:4:4 retains full chroma sampling, while 4:2:0 reduces chroma sampling horizontally and vertically. Other arrangements, including 4:2:2, also exist. Quantization, the source image, the encoder, and later recompression all affect what viewers see, so the sampling label is not a complete quality score.

Applications may use different subsampling and quantization settings behind presets with similar names. Do not compare a quality value from one program directly with the same number in another. Inspect the file or create controlled samples. Save screenshots of export settings and record the resulting file properties so the approved output can be reproduced.

• Judge luma and color edges separately
• Do not confuse subsampling with quality
• Inspect actual output properties

Find the content most likely to expose color bleed

Small red text on gray, blue icons, saturated labels, and one-pixel lines between contrasting colors contain abrupt chroma changes. When neighboring pixels share lower-resolution color information, color can appear to spread across the intended boundary. Black text may look better because its luma contrast carries much of the edge, while equally small saturated text can look fuzzy or develop a colored fringe.

Screenshots, code images, chart legends, logos, and pixel art reveal the issue more readily than most photographs. Inspect text strokes and horizontal or vertical colored lines at 100 percent. A magnified view helps identify the direction of bleed, but make the acceptance decision at the real display size as well. A defect visible only under extreme zoom may be irrelevant, while a slightly softer label can still be unreadable on a phone.

• Use red and blue small text
• Check one-pixel lines and chart legends
• Review native and actual display sizes

Do not rely on the quality slider alone

Many export interfaces show one quality control and hide chroma subsampling. Raising quality can reduce quantization damage, but color-edge softness may remain if the encoder still uses 4:2:0. Selecting 4:4:4 does not guarantee a clean file either; an aggressively low quality setting can introduce other artifacts. Treat subsampling and quantization quality as separate decisions.

When controls are available, export the same source as 4:4:4 and 4:2:0 at two or three quality levels. Record file size, colored-text clarity, photographic texture, and smooth-gradient behavior. If an application cannot select subsampling, inspect the output with a suitable file analyzer or compare another export route. A larger file is not reliable proof that full chroma sampling was used.

• Change one setting at a time
• Record size, text, texture, and gradients
• Do not infer sampling from file size

Choose JPEG or PNG according to the content

For an image dominated by continuous-tone photography with only large, simple text, a carefully checked JPEG may offer a good balance of size and appearance. For interface captures, diagrams, logos, and small colored labels, PNG can preserve exact raster edges without JPEG's lossy coding. PNG is not automatically smaller; photographs can become much larger, so destination limits still matter.

For a mixed image such as a photograph with a caption overlay, keep the editable master and compare a 4:4:4 JPEG with PNG. The destination may recompress every upload as JPEG, so a clean local file is not necessarily the final result. When possible, publish important words as real HTML text or a separate caption instead of baking them into the image. That also improves selection, scaling, and accessibility.

• Assess photo content versus edge precision
• Compare 4:4:4 JPEG with PNG
• Keep critical text outside the bitmap

Verify the actual distribution path

Build one test image that contains small red and blue text on neutral backgrounds, thin colored lines, a chart legend, a gradient, and a photographic region. Export candidates from the same master at the same dimensions. Compare them in the same viewer and record size. Converting a JPEG to PNG can make inspection easier, but it cannot reconstruct chroma detail already lost in the JPEG.

Upload the selected candidate to a private location on the real website, messenger, or content system. Inspect the displayed image and, when possible, download the processed file. Resizing or recompression can intensify color bleed. Approve the result only when text remains readable and important brand or chart boundaries stay within the visual tolerance at the final display size.

Define acceptance in terms of user information, not pixel perfection at extreme zoom. Check that labels can be read, chart categories remain distinguishable, and brand marks are not visibly contaminated. Avoid using color alone to communicate meaning; pair it with text or shape. Record encoder and service versions, and repeat the sample test whenever the export tool or destination changes. Include mobile and desktop display checks when the asset will appear in responsive layouts with different scaling behavior.

• Use a mixed photo-and-text sample
• Compare before and after upload
• Document the approved export path