Why Browser canvas.toBlob() Fails to Shrink PNGs and What Works Instead

A developer running a browser-based file converter found that their PNG compressor was not reducing file sizes, often producing output equal to or larger than the input. The cause is that canvas.toBlob() ignores the quality parameter for PNG, so the browser's built-in encoder simply re-encodes the image with no real control over compression. The article describes two approaches: lossless re-encoding, which yields modest savings, and palette quantization to 256 colors, which is lossy but can dramatically shrink screenshots, logos, and icons. The author recommends UPNG.js for this, comparing candidate outputs and falling back to the original file if no improvement occurs. In a synthetic test, quantization cut a 1.50 MB image to 231 KB, while lossless mode saved only about 5 percent. The piece also notes that palette reduction can cause banding in photos, suggesting JPEG or WebP conversion and dimension reduction as alternatives.