My image compressor picked PNG-8 for screenshots and WebP 75 for photos, so I checked whether it was right
A coworker complained that screenshots on our internal asset site came out with a dirty grey halo around the text. I built that site years ago, and every upload goes through the same JPEG quality 80, screenshots and photos alike. Before touching it I wanted to see how an off-the-shelf compressor handles the two kinds of image, and then check its choices against my own encodes. The tool I used was…
My coworker reported issues with screenshots on our internal asset site, displaying a dirty grey halo around the text. I decided to test an off-the-shelf compressor to see how it handled screenshots and photos compared to my own encodes. I used ImgIng's image compressor on Chromium 149 on an M4 Mac.
For my testing, I uploaded two 1280×800 screenshots I created myself, each with a different set of colors, plus two high-resolution photos from Wikimedia Commons. I also added two additional portrait photos to the mix, bringing the total number of images to eight.
ImgIng automatically selected PNG-8 for the text-based screenshot, reducing the file size from 306.6 KB to 114.1 KB by using 256 colors with dithering turned off. The table screenshot also went to PNG-8, achieving a PSNR of 52.84 and SSIM of 0.9999. For the photos, ImgIng defaulted to WebP at quality 75, reducing the 1.42 MB lake photo to 58.1 KB and the 2996×4200 portrait to the same size.
Interestingly, ImgIng mislabeled two images: the fruit stall and a 2996×4200 portrait, both as "screenshot/UI" instead of "photo." As a result, they were encoded with a quality of 84, rather than 75 as intended for photos.
To compare my own encodes, I used sharp 0.34.5 in Node.js to encode the same four main images with different settings. The results were as follows:
* JPEG at quality 60: 123,658 B
* JPEG at quality 80: 82,392 B
* WebP at quality 80: 58,254 B
* Palette PNG (256 colors): 116,231 B
For screenshots, the palette PNG format outperformed JPEG in both size and quality. The palette PNG was nearly half the size of JPEG at quality 80 and retained pixel-perfect quality. However, WebP 80 came close to matching the palette PNG, being just 3% smaller for the text screenshot and only 63 bytes apart for the table screenshot.
For photos, using a palette PNG was not the right choice. The palette PNGs were 2.5 to 3.8 times larger than the JPEG version at quality 80. The fruit stall photo even dropped to an SSIM of 0.9309, which is lower than JPEG's quality 60 (0.9684). Although the lake photo showed visible dithering bands when dithering was turned off, and a fine grain when dithering was enabled, the misty lower part of the photo showed no banding with 256 colors. This suggests that color concentration is a better indicator than color count alone.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
This story
This is one outlet's version. Read the fullest account.
