Your PNG quality slider does nothing — I measured canvas.toBlob() for PNG, JPEG and WebP
Every image tool on the web has a "quality" slider. Almost nobody tells you which formats actually obey it. I build client-side image tools, so the slider isn't cosmetic for me — it's the whole feature. I sat down with a headless Chrome and measured what canvas.toBlob() really does with that argument, format by format. Here are the raw numbers, and the two places where the mental model everyone…
A recent investigation into the functionality of the quality slider found on many web-based image tools revealed two significant issues. Utilizing a headless Chrome browser and a 1200×800 canvas filled with a photo-like gradient, noise rectangles, and monospace text, the test measured the output of canvas.toBlob() across different formats and quality settings.
The first finding demonstrated that PNG format, which is a lossless format, does not respond to the quality argument at all. Regardless of the quality value set (0.1 or 1.0), the output size remained constant at 1,345,909 bytes. This is because PNG has no concept of quantization target, which is the primary purpose of the quality argument in lossy formats like JPEG and WebP.
As a result, any representation claiming that setting the PNG quality slider to a specific value will result in significant file size reductions is inaccurate.
The second finding showed that WebP consistently outperformed JPEG across all tested quality settings. For instance, when compared to JPEG, WebP achieved half the file size at a quality setting of 1.0 (477,822 bytes vs. 962,887 bytes). At lower quality settings, the size differences became even more pronounced. At a quality of 0.1, WebP's file size was 12,124 bytes compared to JPEG's 1,212,4 bytes, marking a 98.7% reduction in file size for WebP.
These findings challenge the common belief that adjusting the quality slider on an image tool would result in noticeable file size reductions, particularly for PNG format. Instead, the investigation highlights that significant file size reductions are more effectively achieved by utilizing formats like WebP or JPEG with reduced quality settings.
Additionally, the investigation underscores the importance of considering the source-dependent nature of compression algorithms, as well as the fact that setting the quality slider to its maximum value does not guarantee optimal compression, especially for PNG format.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
