WebP compression artifact test

I'll be compressing this one 768×768 image (of a closeup of a Romanesco broccoli, taken by me) at a bunch of WebP quality levels, and for comparison the same JPEG quality levels. All the JPEG images here use 4:2:0 chroma subsampling.

Original image

Romanesco broccoli closeup, PNG, lossless.
PNG, lossless compression, 548496 bytes. (WebP lossless image is 417206 bytes; you can see it here if you want.)

WebP, quality 90

Romanesco broccoli closeup, WebP, quality 90.
WebP, quality 90, 48418 bytes.
A bunch of lit-up pixels, mostly red and cyan, on a black background.
Difference between original image and quality-level-90-compressed WebP image.

JPEG at quality level 90

Romanesco broccoli closeup, JPEG, quality level 90.
JPEG at quality level 90, 70628 bytes.
A bunch of lit-up pixels, mostly red and cyan, on a black background, but in a different pattern from the WebP diff.
Difference between original image and quality-level-90-compressed JPEG image.

WebP, quality 80

Romanesco broccoli closeup, WebP, quality 80.
WebP, quality 80, 30952 bytes.
A bunch of lit-up pixels, mostly red and cyan, on a black background.
Difference between original image and quality-level-80-compressed WebP image.

JPEG at quality level 80

Romanesco broccoli closeup, JPEG, quality level 80.
JPEG at quality level 80, 46179 bytes.
A bunch of lit-up pixels, mostly red and cyan, on a black background, but in a different pattern from the WebP diff.
Difference between original image and quality-level-80-compressed JPEG image.

WebP, quality 50

Romanesco broccoli closeup, WebP, quality 50.
WebP, quality 50, 22016 bytes.
Many more lit-up pixels on a black background, including much more green, not too boxy though.
Difference between original image and quality-level-50-compressed WebP image.

JPEG at quality level 50

Romanesco broccoli closeup, JPEG, quality level 50.
JPEG at quality level 50, 25861 bytes.
Much like the difference between WebP-50 and original, but macroblocks are much more visible now.
Difference between original image and quality-level-50-compressed JPEG image.

WebP, quality 30

Romanesco broccoli closeup, WebP, quality 30.
WebP, quality 30, 18736 bytes.
Saturated but dim pixels, showing a lot of the shapes of the broccoli, and a lot of horizontal line artifacts.
Difference between original image and quality-level-30-compressed WebP image.

JPEG at quality level 30

Romanesco broccoli closeup, JPEG, quality level 30.
JPEG at quality level 30, 18247 bytes.
Saturated but dim pixels, showing a lot of boxing, a lot of red and green, quite a bit of blue and purple, but not showing much of the detail.
Difference between original image and quality-level-30-compressed JPEG image.

WebP, quality 10

Romanesco broccoli closeup, WebP, quality 10.
JPEG at quality level 10, 15652 bytes.
The shapes of the original image are recognizable in this image diff.
Difference between original image and quality-level-10-compressed WebP image.

JPEG at quality level 10

Romanesco broccoli closeup, JPEG, quality level 10.
JPEG at quality level 10, 8334 bytes.
A mess of green red, split along macroblock boundaries.
Difference between original image and quality-level-10-compressed JPEG image.

WebP, quality 0

Romanesco broccoli closeup, WebP, quality 0, a blurry mess but recognizable.
WebP, quality 0, 12560 bytes.
Interesting patterns of red and green: circles, horizontal and vertical lines. A few splotches of cyan where the original image has almost-white highlights.
Difference between original image and quality-level-0-compressed WebP image.

JPEG at quality level 0

Romanesco broccoli closeup, JPEG, quality level 0, basically a 48-by-48-pixel, 16-color image but with very big pixels, unrecognizable.
JPEG at quality level 0, 4719 bytes.
The original image on hallucinogens, with the brightness data almost recognizable but with the hues severely shifted along macroblock boundaries, logs of pure green, lots of pure red, an odd area with pure blue.
Difference between original image and quality-level-0-compressed JPEG image.

Addendum, December 2022: the difference images shown here are themselves lossy, compressed as WebP's at 80% quality. I have a file size quota to work with here, and when lossless these difference images were over half a megabyte each (or around 750 kB as a PNG), but now they're about 90 kB each, a saving of about 82%.

The difference between a lossless and lossy difference image is noticeable, but at this quality level the difference seems to mostly be in vibrancy or chroma: the location of the differing pixels is correct, but the dark greens of the original difference image are more akin to grey when compressed. The reds and blues survived compression a bit better than the greens. Also, in this case, the differences are mostly individual pixels, rather than large areas of color (like seen in the lower-quality JPEG compressions); large areas of color survive compression better. The greying-out of these images isn't a purely WebP thing either: JPEG does the same thing. The contrast difference between a single green pixel between two black pixels seems to just be too great.

Lossy difference image. Lossless difference image.
The lossy difference image is the first one (at the left or, if your screen is narrow, on top); the lossless one comes second. These are both of the difference between the original uncompressed image and the 90%-quality WebP-compressed one.

In any case, the original image still exists, so lossless difference pictures can still be computed.

oatcookies.neocities.org | 2021-02-25, 2022-12-26