Designer News
Where the design community meets.
↵
A better PNG minifier
over 5 years ago from Ivan Kutskir, Programmer
Ivan Kutskir, over 5 years ago
"hard problem to solve in the browser" - what do you mean by that?
I don't think that tools that you mentioned can do a better job than UPNG. Dithering may improve the visual quality, but it also usually increases the file size (by creating noise), that is why I avoid it.
Vlad Danilov, over 5 years ago "hard problem to solve in the browser" - what do you mean by that?
Just check out code complexity in the linked projects.
I don't think that tools that you mentioned can do a better job than UPNG.
I've updated the comment with the link to image. Can you make it this small without changing the number of colors?
Dithering may improve the visual quality, but it also usually increases the file size (by creating noise), that is why I avoid it.
It's not for everything. But without it, images containing gradients have noticeable quality degradation. Dithering can also be applied selectively.
Just because some project is more complex, does not mean it works better. I also don't understand what does it have to do with browsers.
Your bunny.png is 23.3 kB. My bunny.png https://imgur.com/a/XGaTX from UPNG.js is 20.4 kB and I doubt you can see any difference.
Vlad Danilov, over 5 years ago The 23.3 kB is 254 colors. The 20.4 kB is just 25 colors, and just 15.1 kB (-26.1%) losslessly compressed with a better tool. That's the difference.
That is truly amazing! I guess the 15.1 kB version was made by trying different orderings of palette and different filtering options. I could do that in 6 lines of code, but this part would take too much time ...
How long did it take? I guess it was more than 50 milliseconds.
Vlad Danilov, over 5 years ago It is time consuming, takes seconds. You need all the performance you have.
Type trials, palette sorting, filter brute forcing, nearly-optimal Deflate compression, etc. It's way more than 6 lines of code to do it properly.
With bit-optimal parsing and elaborate heuristics you can probably get close and keep top performance.
Denis Rojcyk, over 5 years ago
I've been using Optimage for a month or so and absolutely love it! (also wrote a short article about it on my blog).
Vlad Danilov, over 5 years ago Thanks! Do you have a link?
Edit: Found it. It’s all straight to the point! For anyone interested here's the link.
Special thanks for including test images. Let's see if I can improve on that one.
Image compression is a hard problem to solve in the browser. UPNG minifier appears to be winning just by selecting fewer colors into an image palette without any dithering. This may result in a smaller file size but visual quality suffers a lot, and there’s still a lot to optimize.
Color quantization is just the beginning. Have a look at Pngquant (used by TinyPNG), OptiPNG, Libdeflate, Zopfli, ECT, etc. This is what it takes to properly compress PNG images. There’s a room for improvement too. That's why I'm making a new image optimization tool Optimage. One challenge is to actually remove any sliders and choose compression parameters automatically.
For comparison, the
bunny.pngcan be further reduced by 58.7% of 57.9KB. Even at lower quality it can be losslessly reduced by good 10-30% with the right tools. The same applies to virtually any online service.Browsers do improve rapidly. For example, Figma editor is written in C++ and cross-compiled to JavaScript using the emscripten cross-compiler. This is a promising direction to future-proof your hard work.