Images & photos · Image Converter & Compressor
Chroma subsampling: why JPEG blurs red text and thin coloured lines
· How it works
image-formats jpeg image-quality
JPEG and lossy WebP store colour at lower resolution than brightness, which is invisible in photos and obvious on red text. This post explains 4:2:0 subsampling, why encoders do it, and how to choose a format when colour edges matter.
The red label that came out fuzzy while the black text stayed sharp — the symptom that points straight at chroma subsampling
A red label can emerge softer than neighbouring dark text even when both began as crisp vectors in a screenshot. That symptom is worth investigating, but it does not by itself identify an exact chroma-subsampling mode. ToolAcre decodes the source, draws pixels to a canvas and asks the browser for JPEG or WebP bytes; the resulting edge is evidence, while the encoder’s private decisions are not.
Start with a controlled image containing narrow red, blue, grey and black strokes on one background. Keep its dimensions unchanged, export each target once and inspect the downloads at native pixel size. If only the lossy outputs smear saturated boundaries, format choice is implicated. If every output is soft, first check whether resizing occurred, because the plan classifies any changed dimensions as resampling.
Luma and chroma: splitting a pixel into brightness and colour — the YCbCr transform and why encoders separate the two
The outline describes luma and chroma transforms, yet no transform code appears in this repository. The application supplies decoded RGBA pixels to the browser encoder and never receives separate brightness or colour planes. It can therefore document a practical distinction—lossy output may discard visible detail—without pretending to reveal the browser’s coefficient calculations or internal colour representation.
That boundary changes how a defect report should be written. Record the source MIME type, target MIME type, quality, original and output dimensions, browser, and a crop showing the affected edge. Do not state that a particular channel was halved unless an encoder inspection proves it. A precise observation can be reproduced; a borrowed explanation about hidden implementation settings may send maintainers toward a control they do not have.
Colour-detail loss is observable, but this repository does not implement or expose a YCbCr transform
The familiar 4:4:4, 4:2:2 and 4:2:0 labels are not controls in this interface. `encodeCanvas` passes only MIME type and, for JPEG or WebP, a normalized quality value. Neither the panel nor the conversion plan carries a subsampling field. A section that presented those modes as selectable would contradict the shipped product, so the useful lesson is the absence of that choice.
When colour-edge fidelity is a requirement, choose a path whose result you can inspect rather than assuming a mode from the slider. PNG is the available lossless encoder and keeps alpha when dimensions stay fixed. JPEG and ToolAcre’s WebP output are explicitly described as lossy at every quality. That source-backed distinction is enough to choose a safer candidate for diagrams without publishing an unsupported support matrix.
The browser encoder exposes no 4:4:4, 4:2:2 or 4:2:0 selector
Photographs distribute detail across textures, lighting and irregular boundaries, so a small colour-edge change can be less conspicuous than it is on a one-pixel interface rule. This is an inspection heuristic, not a claim that human vision follows a ratio encoded in ToolAcre. The application does not calculate perceptual similarity, classify content or certify that damage will be invisible to a viewer.
Use representative material. A portrait alone is a poor test for a design system full of coloured type, and a synthetic chart alone is a poor proxy for a photo library. The converter reports measured byte size and offers a before-and-after preview for the first result, but acceptance should include opening the file in the actual layout. Preview scaling can conceal exactly the boundary damage under review.
Photographs may conceal colour-edge loss better than graphics; no vision model is asserted here
Graphics concentrate meaning in hard transitions: a red warning underline, a blue series in a chart or coloured text on white. When neighbouring samples are blended or rounded during a lossy encode, the edge can appear to bleed even though its location is unchanged. Resizing adds another mechanism because `drawImage` redraws the source with high smoothing before encoding.
Separate those mechanisms by holding dimensions constant for the first comparison. If PNG remains crisp while JPEG and WebP soften, the lossy encoding stage is the differentiator. Next repeat with a deliberate resize to learn what resampling adds. This two-step experiment is stronger than changing quality, dimensions and format together, because only one decision moves in each round.
What the browser encoder lets you control — a quality number but no subsampling switch, and why lossy WebP is always 4:2:0
ToolAcre gives the browser a quality number clamped from 0.01 through 1 for JPEG and WebP. It offers no switch for colour sampling, transform tables or encoder effort. The workbook’s claim that lossy WebP is always one named subsampling mode is outside the inspected implementation, so this article deliberately does not repeat it as a product guarantee.
The practical response to a hidden encoder choice is not to hunt for an undocumented checkbox. Compare actual outputs, preserve the source, and select PNG when exact coloured edges matter more than a smaller file. If a production pipeline requires a specified sampling mode, use an encoder whose documented API exposes it; a canvas convenience API cannot satisfy a contract it never accepts.
The tool passes quality only; the encoder’s subsampling policy remains hidden
Build a 1200-by-800 test chart with thin red and blue diagonals, dark labels, a smooth neutral gradient and one transparent corner. Export it without resizing to PNG, JPEG and WebP. The repository cannot predict the byte totals or exact artefacts, so write down the measured results shown by the panel instead of inserting promised percentages into the test plan.
At 100 percent, compare the coloured strokes against the dark controls and check whether the transparent corner survived. PNG should retain alpha through the supported lossless encoder; JPEG receives the selected matte because it cannot store alpha; WebP retains alpha but is still marked lossy. These three visible outcomes test separate properties and avoid treating “smaller” as a synonym for “better.”
Takeaway: pick the format by content — how the Image Converter & Compressor lets you export the same image as PNG when colour edges must stay crisp
Format choice cannot guarantee how every downstream application will render colour, zoom an image or scale it for display. ToolAcre also does not expose subsampling metadata from its outputs or provide a pixel-difference metric. Those omissions mean the final check belongs in the target page, document or application rather than solely inside the conversion panel.
For saturated text and narrow coloured rules, begin with the lossless candidate and justify any lossy replacement with direct inspection. The Image Converter & Compressor makes that comparison repeatable on one device: same source, fixed dimensions, three output formats and measured bytes. The result—not a shared slider number or presumed subsampling mode—should decide what ships.