38

A better PNG minifier

almost 6 years ago from , Programmer

Hi guys, I made this PNG minifier six months ago: UPNG minifier.

Recently, I updated it and implemented a more advanced and faster algorithm. I believe it is better than TinyPNG and other minifiers for three reasons:

  • it has the Size / Quality slider, and you can see the output in real time
  • it works completely in the browser (there is no upload/download)
  • it is open-source (UPNG.js), you can use it as a library

Can you please give me some advice, how can I make it even better and attract new users? :)

27 comments

  • Akshay ChauhanAkshay Chauhan, almost 6 years ago

    I use this free Mac app called ImageOptim – https://imageoptim.com/mac

    17 points
  • Jacob Kelley, almost 6 years ago

    From an engineers perspective:

    1. Use Spaces instead of Tabs (mostly an opinion, but helps with online legibility)
    2. Lint your code
    3. Use a style guide
    4. Write Unit / Benchmark tests
    5. Maintain
    10 points
  • Vlad Danilov, almost 6 years ago

    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.png can 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.

    3 points
    • Ivan KutskirIvan Kutskir, almost 6 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.

      0 points
      • Vlad Danilov, almost 6 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.

        0 points
        • Ivan KutskirIvan Kutskir, almost 6 years ago

          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.

          0 points
          • Vlad Danilov, almost 6 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.

            2 points
            • Ivan KutskirIvan Kutskir, almost 6 years ago

              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.

              0 points
              • Vlad Danilov, almost 6 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.

                0 points
    • Denis RojcykDenis Rojcyk, almost 6 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).

      1 point
      • Vlad Danilov, almost 6 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.

        0 points
  • Ktrn DsrsKtrn Dsrs, almost 6 years ago

    Great job, but personally, it will be quite hard to beat Pngyu (which i uses) to batch compress my png before putting them in my designs. Completed with ImageOptim & JpegMini (for the jpg), this is my best trio at the moment.

    1 point
    • Kus WantoKus Wanto, almost 6 years ago

      I also use PNGYU extensively. It helped me reduced PNGsequence file size significantly before creating animated sticker with APNG assemblers for all my stickers at STCKRmarket.com.

      1 point
      • Ktrn DsrsKtrn Dsrs, almost 6 years ago

        APNG sweet! I am curious if in this approach, you consider Edge at a certain point since it does not support it (damn M$).

        I personally go with animated png stripes because of that limitation

        0 points
        • Kus WantoKus Wanto, almost 6 years ago

          The beauty of APNG is when the browser not supported it will be displayed as static image.

          I don't use it for website tho, mainly use it for my iMessage and LINE Stickers. And also encourage some of the clients to use APNG for their app (iOS/Android) assets, instead PNG sequences.

          1 point
  • Vinicius Coelho, almost 6 years ago

    I got better results using kraken.io in Lossy configuration than UPNG: https://imgur.com/a/TPegS

    1 point
  • Norm Sheeran, almost 6 years ago

    This is brilliant, well done and thanks for sharing I will 100% use this in future projects and of course 100% donate

    1 point
  • Jonathan YapJonathan Yap, almost 6 years ago

    I've always use pngyu http://nukesaq88.github.io/Pngyu/ even though its old. It uses pngquant too. The simple UI optimises at lighting fast speed and pretty aggressive at crushing down the file size.

    0 points
  • Dana (dmxt)Dana (dmxt), almost 6 years ago

    Can you implement it to be gulp supported?

    Thanks

    0 points
  • Shashwat Amin, almost 6 years ago

    Nice idea buy why reinvent the wheel?

    https://kraken.io/web-interface

    0 points
    • anthony thomasanthony thomas, almost 6 years ago

      He's not reinventing the wheel. He's making a wheel that's better than its predecessors, which I think is a great cause.

      3 points
  • Luke Caish-SadlekLuke Caish-Sadlek, almost 6 years ago

    Great tool! Bookmarked for future use. Two observations after a quick test:

    1) It would be great to be able to choose Size vs Quality on a per image basis. If I'm uploading lots of images, I'd personally like to be able to choose compression settings individually.

    2) The tool seems to set the images resolution (Pixels/Inch) to 72. Not really an issue, but it does mean the original image (in my rest a Retina screenshot) and compressed image appear at different sizes in OSX Quicklook, making them harder to visual compare.

    0 points
  • Brian FryerBrian Fryer, almost 6 years ago

    Amazing. Thank you so much for your work—it really makes a difference in the lives of many digital professionals.

    One thing I’ve noticed about build tools like this is that I’m much more likely to adopt it when I can easily find a wrapper for my workflow-of-choice (e.g. gulp, grunt, webpack). In your specific instance, I’d also recommend a plugin for imagemin.

    And don’t forget about all the static site generators out there too—it would go a long ways to have plugins for each one (e.g. Jekyll, Metalsmith, Hugo). https://www.staticgen.com/ is a great resource for learning more.

    0 points