How does tinypng.com minimize pictures?

Question

I recently discovered tinypng.com, which helped me to minimize a picture on my website from over 60k to less than 20k by keeping the same quaility (for me personally at first sight, I'm not so into graphics so I can not tell you exactly - it's my subjective opinion). On their website they write the following about how they do that:

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result better PNG files with 100% support for transparency. Have your cake and eat it too!

As I find the service very important for running a website, I don't want to be dependent on them - they can disappear tomorrow, but I still have to minize pictures. That's I came here to ask: How can I do the same within my gimp installation or by using the Linux command line tool imagemagick?

Answer 1

For Gimp

You can get color-indexed PNG in Gimp by changing the image mode to Color-indexed before exporting. However, this restricts you to a binary alpha channel (in other words, this won't support the proportional opacity available in PNG), even if you can mitigate this by using the "Dither transparency" setting when doing the conversion.

For ImageMagick

convert input.png PNG8:output.png

Now, it depends what kind of PNG you have. CGI such as logos or screenshots compress very well in PNG, and color-indexing them will possibly blur edges, so the color-indexed version won't look as good and won't be much smaller.

Answer 2

Format PNG8 ie. indexing to 255 (+ full transparency) colors before saving as PNG gives nearly 75% size reduction, but the result looks out often pixelated or there's harmful banding. That depends on used dithering settings and how complex coloring the image has. If the image has only 255 or less colors and the transparency is only full or none (=no partially transparent pixels) the result of course is perfect as is, you do not need any clever conversion methods.

Unfortunately photos have gradients, 255 colors is often not enough. Mathematical methods are developed to change image content cleverly before indexing to make a 255 colors palette possible to fit better. The changes are lossy, they cannot be taken back after saving the image. In some texts that lossy preprosessing is called "vector quantization". TinyPNG and some other PNG optimization services use it.

As a lousy replacement I have tried Selective Blur (=Smart Blur in Photoshop) to flatten complex coloring, but keeping borders and edges. It helps, but the result mostly has been worse than TinyPNG's processing

Vector quantization implementations are available as runnable software and as code for programmers. Here's some resource links:

1) An explanation of vector quantization https://www.gamasutra.com/view/feature/131499/image_compression_with_vector_.php

2) A general guide of PNG optimization. It contains several links to actual tools and vector quantization implementations.

https://medium.com/@duhroach/reducing-png-file-size-8473480d0476

3) Pngquant; an implementation of vector quantization https://pngquant.org

It has generous explanations, links to code downloads and links to applications and plugins which use Pngquant. Pricing = freeware, donate what you want.

There's no ready to use GIMP extension, but maybe you see some other version useful.

I have tried only SuperPNG, a Photoshop plugin. https://www.fnordware.com/superpng/

It seems to do the same as TinyPNG with equal quality. In Photoshop it appears as new format option in File > Save As -dialog. It's not a filter. I have no idea, how it could be used in other programs which allow Photoshop filter plugins. But it works with pre-CC legacy Photoshops and has 64 and 32 bit versions.