PNG optimization - can a PNG be further optimized

Question

I created a design for my website in Photoshop and exported all images as 24-bit PNG images. Later, running a PageSpeed test on the website showed that the images can be further reduced upto 50% in size with lossless compression. How can this be? Does Photoshop not compress the images as much as possible? What image compression program does Google PageSpeed uses internally, I might want to give it a try.

Answer 1

Take a look at pngcrush, it's a command-line tool that lets you optimize PNG files using many methods. If you'd prefer a GUI, ImageOptim for Mac embeds pngcrush, but can do even more.

Answer 2

You can use TinyPng service to compress your pngs up to 60 percent. Picture quality change is not noticable for human eye. Service has an web interface, WP plugin and also Photoshop plugin.

Answer 3

Actually, compressing PNGs is more complex than, e.g., plain text compressing. There are dozens of different factors, that determine the final size of the image.

For example, you say, that you use 24bit PNGs. If your image only has 256 colors, you might be better off with an 8bit PNG (converting to indexed colors before saving).

Then, PNGs can contain metadata (like who and which program created them). That can be stripped. And so forth.

Take a look at the manual of optipng to get a basic idea on which wheels to turn, if you want to really minimize the PNG filesize.

My guess is, that the actual binary, that Google Pagespeed uses, is irrelevant. It will rather check some properties of the PNG to decide, if the PNG could be minified more (OptiPNG is even linked there).

Edit: The other day I found an interesting topic on the various PNG types: http://calendar.perfplanet.com/2010/png-that-works/

Answer 4

I use these tools for post-processing PNG images:

• OptiPNG
• Pngcrush

Google PageSpeed probably uses one of the above (or a similar open-source) tool behind the scenes. These tools use various techniques to reduce the file size, such as:

1. Color reduction: if a truecolor PNG image uses 256 colors or less, the image size is reduced by converting it to indexed image.

2. Deleting metadata: PNG images can contain metadata which is often ignored by browsers (Photoshop for example stores gamma information and software name in PNG images). Removing this data can save a few bytes or kilobytes.

3. Pre-compression: PNG data is compressed in two stages. The first stage is called filtering. It involves lossless conversion data into a more compressible form; and some software (older versions of Photoshop for example) suck at this. The tools re-analyze the data and use heuristics or brute-force to determine the filter(s) that yield most compressible output.

4. DEFLATE: The filtered data is compressed using DEFLATE. This algorithm itself allows various levels of compression (fast vs high compression for example).

Re-compression (item no. 3 and 4 above) could reduce the file size by 5-50% depending on how poor the original compression was.