Why JPEG can blur colored text even at a high quality setting

●4
calendar_today • schedule3 min read

A JPEG export can leave a soft fringe around colored text even when the image keeps its original dimensions. Before pushing the quality slider higher, check whether the encoder is reducing the resolution of the color channels. That process is called chroma subsampling.

Consider a small red label beside a gray button. Its edge has an abrupt color change. A cloudy sky usually has gentler transitions, so settings that suit that photograph may leave the label looking smeared.

Color has its own resolution

A common JPEG encoding path converts RGB into YCbCr. Y carries luma, a brightness-related signal; Cb and Cr carry color-difference information. Chroma subsampling reduces the spatial resolution of those color components. The decoded picture still has the same pixel dimensions.

With 4:4:4, each color-difference component has a sample at every pixel position. With 4:2:2, each has half the horizontal resolution. With 4:2:0, each has half the horizontal and half the vertical resolution. For a conceptual 4-by-4 patch, that means 16 samples per chroma component at 4:4:4, compared with four at 4:2:0. These are sample counts, not predictions of compressed file size. The TurboJPEG API documentation describes these sampling arrangements.

When decoding a subsampled image, the decoder reconstructs color samples for the full output grid. A narrow colored stroke can acquire a softer edge in that reconstruction. Inspect the small labels directly: fitting the whole screenshot into a preview can conceal the damage.

Quality and subsampling are different controls

In libjpeg-turbo's lossy JPEG encoder, the quality setting scales the quantization tables. Subsampling has its own control. Its command-line documentation explains that quality 100 still allows losses from subsampling and rounding. A high quality value does not, by itself, establish that full chroma resolution was retained.

An application may tie its quality slider to several encoder settings. Check the exporter you are using; the number 90 alone tells you too little to reproduce its output in another application.

Compare exports from the same source

Start with a screenshot containing small colored text. From that source, export two JPEG copies at identical dimensions and quality settings. Use 4:2:0 for one and 4:4:4 for the other if the encoder lets you choose. Put those settings in the filenames and keep a note of the encoder version. Someone checking your result should be able to recreate the exports.

View the copies at a consistent image zoom, including 100%, then inspect an enlarged crop of the label. Keep any resizing out of this first comparison. Otherwise, a resizing filter adds another explanation for a soft edge. Compare the downloaded files, because a preview in an export dialog may be scaled differently.

Treat this as an experiment to run on your own images. No benchmark measurements are reported here. If the two copies look alike, record that observation and investigate the other processing steps before attributing the problem to subsampling.

I work on Morphio, which offers HEIC conversion tools. When deciding on an output format, I would include small colored labels in the visual checks if they are part of the image. The encoder controls described above are not a statement about which settings Morphio exposes.

Choose a format for the content

For screenshots with text or diagrams, include PNG in the comparison. PNG compresses losslessly, so it can preserve the raster samples supplied to its encoder. It cannot restore details already lost in a previous JPEG export. MDN's image format guide discusses PNG and JPEG in this context.

If the destination requires JPEG, compare a 4:4:4 export with the subsampled copy. Other lossy encoding steps still affect both. Then inspect the image served by the destination page: an upload service may resize or recompress your file after you send it.

1 Comment

0 votes
🔥 Join developers growing publicly
Share your knowledge, build in public, and grow your developer presence with a global community.

More Posts

I’m a Senior Dev and I’ve Forgotten How to Think Without a Prompt

Karol Modelski - Mar 19

How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

Dharanidharan - Feb 9

TypeScript Complexity Has Finally Reached the Point of Total Absurdity

Karol Modelski - Apr 23

Sovereign Intelligence: The Complete 25,000 Word Blueprint (Download)

Pocket Portfolio - Apr 1

The Privacy Gap: Why sending financial ledgers to OpenAI is broken

Pocket Portfolio - Feb 23
chevron_left
154 Points • 4 Badges
2Posts
0Comments
I work on Morphio, an online toolkit for HEIC conversion and image format workflows. I write about i... Show more

Related Jobs

View all jobs →

Commenters (This Week)

5 comments
2 comments
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!