pngquant – reduce PNG file sizes (for use as AE proxies or on the internet and mobile app)

PNG file format is one of the most useful image format,wether in animation or on the internet, for its lossless compression and its alpha channel for opacity.
But, working on my new short movie, with a lot of heavy VFX, I thought it could be better to find an equivalent to the PNG format with a LOSSY compression, to have smaller files while keeping transparency to use as proxies in the softwares involved. After all, using proxies is to make things faster!

After some research, I chose a very simple solution, which can be helpful for anyone – including people working on the internet or for mobile apps, who seek transparency and small file sizes.

The solution is pngquant, a free software which converts big PNG (lossless) to small PNG (lossy). For a lighter usage (lower quality, but fast!).

 

Update: I developped a script for After Effects automating this process to create proxies. It’s here!

 

How a PNG file can be smaller than a PNG file?

There are two pretty simple ways to reduce PNG sizes (which you can apply using Photoshop, while pngquant automates this process without having to launch the heavy Photoshop).

  • Look at transparency

  • Each pixel containing 4 channels (RGB+Alpha), even 100% transparent pixels (Alpha = 0), have three channels containing colors.
    Long story short, if this color content varies much between transparent pixels (if it is not a simple color or a nice gradient), all the color variations will be stored in the PNG file even if no one can see them, as the pixels are 100% transparent. The file will be much bigger than expected. To make it far smaller, you just have to remove the color content from all the 100% transparent pixels, leaving juste one simple color.
  • How many colors are there in the image?

  • The PNG format can use an indexed color palette.
    This means that instead of using all 16 million usual colors from images using 8 bits per channel (256 levels per channel R, G, B or A, 24 bits, 32 bits including transparency), or maybe 16 bits per channel (trillions of colors), PNG can use a smaller quantity of colors, defined by a color palette included in the file. Lesser colors this palette contains, smaller the file will be. A simple posterize effect, reducing the total count of colors (similar pixels will have the same color, using a defined threshold) will greatly reduce the size of the final image file, without changing its appearance if the threshold is well defined.

Ducati_side_shadow
Original PNG 76KB
Ducati_side_shadow-fs8
pgnquant 20KB

Pngquant

pngquant does all of this for you, on existing PNG files, the best thing being it can do it on PNG sequences ; it is very simple, for a great effect: my PNG files are reduced by a factor of 3 to 5. On a complete sequence used as a video proxy, I can reduce the size from 100MB to 30MB at least, which means a faster access to files, so a faster software use, plus a lot of space freed on my drives.
The visual difference is barely seen, so it won’t handicap your work, unless you’re color correcting or rendering the final export (and much more with more than 8bpc pipelines) where you should prefer “standard” PNG, or even 16bpc PNG or 32bpc capable formats (DPX or EXR in most cases).

  • Download pngquant command-line binary (windows, mac or linux).
  • Using a command/terminal, the command (for windows only, remove “.exe” for Mac and Linux)
    pngquant.exe --force --speed 10 --ext -r.png 256 *.png
    will convert all PNG files found in the directory where you launched it.
  • To ease this under Windows (there are methods for Linux and Mac too), I use this command in a “.bat” file, including the whole path to the “.exe” file; just create a new text file containing this only line:
    "C:\path to pngquant\pngquant.exe" --force --speed 10 --ext -r.png 256 *.png
    and save it as “convertPNG.bat” (for example, just be sure to replace “.txt” with “.bat).
    Next, I copy/paste this bat file in the directory containing the PNG files to convert, and I double-click it. Nice and easy!
  • Converted PNG are standard PNG files but much smaller, so they are full compatible with all softwares. You can use pngquant on a single image too, tools are available with graphical user interfaces too (but I find my way of using it faster). Everything is listed on the website.

Some explanations about the command:

  • --force will force pngquant to overwrite any existing file.
  • --speed 10 defines speed conversion vs quality. 10 is faster, but default value is 3.
  • --ext -r.png defines a suffix for the converted filename (here it is “-r”).
  • 256 influences the final count of colors in the file.
  • *.png makes pngquant work on all PNG files found in the current directory. They won’t be deleted, you’ll have to do that yourself.
Update: I developped a script for After Effects automating this process to create proxies. It’s here!

I could not do and share what I do for free without your support. Help me on Patreon! Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *