Build1 publisher3 min readPublished
A 124-color PNG-8 beat every JPEG export of a red-text poster on size and edge error
PNG-8 at 124 colors encoded a red-text test poster in 48,481 bytes at an edge error of 0.13 Delta E, smaller and cleaner than every JPEG export. For flat graphics like this one, an export tool that converts everything to JPEG ships bigger files with dirtier red text.
The Engineer · Build desk
What happened
- Chromium 149's canvas JPEG grew from 118 KB to 265 KB between quality 0.80 and 0.99, while edge error fell only from 8.11 to 6.35.
- The only file smaller than the PNG-8 was a q60 AVIF from macOS sips at 46,832 bytes, and its edge error of 7.88 was among the worst measured.
- Every lossy file used 4:2:0 chroma subsampling, storing the two color channels at half width and half height, a quarter of full resolution.
- A Pillow JPEG at 4:4:4 and quality 75 cut edge error to 4.47 but weighed 169,640 bytes, more than three times the size of the PNG-8.
- On a real holiday-notice template, browser WebP at 0.9 scored edge error 4.67 in the calendar area, and cwebp with sharp YUV cut that to 3.71.
Compiled by The EngineerSomething wrong?How this is made
Why it matters
- cost Teams that respond to fringing by raising canvas JPEG quality pay for much bigger files and still ship red edges above the Delta E 5 fringe threshold.
- constraint Browser-side exporters built on canvas.toBlob cannot get 4:4:4 JPEG from this Chromium build below quality 100, so the JPEG setting that cleaned up red edges is out of their reach.
- decision Export and upload pipelines that want small files with clean red text have to choose a format per image and send few-color flat graphics to palette PNG or lossless WebP.
Text outlines mostly live in the brightness channel, so black on white comes through subsampling intact [13]. The poster's red, (215, 0, 15), has low brightness. Against white, yellow or dark backgrounds, much of its edge information sits in the color channels the encoder has already downsampled [13].
Below quality 100, the canvas quality setting does not touch that problem. Chromium 149's canvas.toBlob keeps JPEG at 4:2:0 until quality rounds to 100 [14]. Every browser JPEG in the test stayed above Delta E 5, the level commonly treated as a visible fringe [9][6]. The author calls that threshold a rule of thumb, not something they measured [6]. Among the JPEG results reported, only Pillow's 4:4:4 encode landed under it [2].
The other lossy formats lose to the same subsampling. Lossy WebP is 4:2:0 by spec [14]. Browser WebP at quality 0.9 came out at 86 KB with Delta E 6.56 [11]. AVIF supports 4:4:4, but the macOS sips tool did not use it [14]. The AVIF results describe sips's defaults as much as the format [14].
"The lossless side wins for a boring reason," the author wrote [16]. The poster is big flat areas of a few colors [17]. Palette PNG and lossless WebP can describe that almost for free. A lossy encoder spends most of its bits approximating sharp color steps and still misses [17]. The source PNG had 746 distinct colors, and all but a handful were anti-aliasing shades along glyph edges [3]. Quantized to 124 colors, the file shrank to about 38 percent of the source's 126,373 bytes [1]. Lossless WebP from cwebp was 951 bytes larger than the PNG-8 and scored Delta E 0 [3][8].
I would copy the scoring method into any export tool's test suite. The author measured mean CIE76 Delta E only inside a 2 px band around the glyph edges, because flat areas barely change and would hide the problem [5]. The author builds small export tools at work, and set out to test the usual advice to export graphics as JPEG because JPEG is small [1]. For flat graphics with red text, I think that advice is the wrong default. A per-image check of how many real colors an image carries would send this poster to palette PNG or lossless WebP.
For the PNG-8 result to transfer, an image has to look like this poster to the encoder: a few design colors plus edge shading [3]. The poster was drawn in code, with no photos [2]. Everything ran on one Apple M4 with 16 GB [4]. The real-world follow-up used a Gaoding Design holiday template, a 1242x2688 truecolor PNG with gradients, illustrations and lanterns behind the text [18]. Both lossy WebP scores in its calendar area sit under the Delta E 5 rule of thumb [19][6]. Even so, the author describes browser WebP turning the small red strokes darker and brownish, while lossless WebP could not be told apart from the source [20]. The cited template results do not include a palette PNG. That image has 169,747 distinct colors to quantize, against 746 on the poster [18][3].
What to watch
- A palette-PNG size and edge score for the 169,747-color Gaoding template would show whether the PNG-8 result survives gradients and illustrations.
- An AVIF encode at 4:4:4 from an encoder that exposes it would test whether AVIF can match the lossless files on red edges at a smaller size.
- A Chromium change that lets canvas.toBlob emit 4:4:4 JPEG below quality 100 would change the browser-side half of this result.