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.

Stemma

see also #5452097 – Incumber

Answer 1

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/

Cottrill

You are right: I was exporting all slices as 24-bit PNG while most of the images would produce exact same pixel for pixel output when saved as 1, 2, 4 or 8 bit PNG. I did not bother optimizing these images using command line tools, instead I used this GUI: benhollis.net/software/pnggauntlet (and entropymine.com/jason/tweakpng for getting the PNG to display the right colors in IE). – Stemma

If you have an old version of Photoshop (pre-CS), you should consider switching to GIMP. It's open source and does better PNG compression than older PS versions. – Cottrill

Answer 2

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.

Skewback

Answer 3

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.

Rejuvenate

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.

Stemma

Answer 5

I'm using OptiPNG and pngcrush utilities.

I wrote a little bash script that finds all png images in current directory and its subdirectories and then optimizes them using number of parallel processes equal to number of CPU logical cores.

cpus=$( ls -d /sys/devices/system/cpu/cpu[[:digit:]]* | wc -w ) # Linux
# cpus=$(sysctl -n hw.ncpu) # OS X

find . -name "*.png" | xargs -n 1 -P $cpus -I % \
    sh -c 'pngcrush -ow -rem allb -brute -reduce "%"; optipng -o7 "%";'

Laval

Answer 6

I read from the documentation :

PNG - Must be 8 bit or lower (no 24-bit PNGs will pass)

(on http://www.webpagetest.org/, linked from PageSpeed)

Developer

Answer 7

Well you might want to consider "Save for web" in photoshop, since in the latest couple of versions they've improved the compression algorithms considerably.

And by the way, you really don't have to implement all of the stuff in PageSpeed. I would suggest using css sprites for background images that has more or less the same colors. And if your website background is white, you can even further shrink the size of sprites using jpg comparison.

Good luck

Fibrous

You could be right, I am using a stone age version of Photoshop. – Stemma