Web Applications Blog

One of the most recent image compression formats is PNG. The advanced features of PNG, such as high compression and 32-bit support makes it the format of choice for web applications. Opera supports PNG, both on desktop and device; we use this format for most of our graphics.

There are two things you should do to your graphics, when preparing them for device. The first is color reduction, the second is re-compressing. First color reduction.

Color reduction

Why would you want to reduce the amount of colors used? We want the maximum number of colors, right? Yeah! Unfortunately, most mobile devices do not support millions of colors; many of them support only a percentage of that. The key to making sure your images look good on device is reducing color depth, using dithering techniques. Corel’s Paint Shop Pro is the only graphics application I have tested which has a special “reduce to thousands-of-colors” feature.

If you don’t own a copy, you will have to posterize your images to the color depth of the target device. Then convert this image to indexed colors with an EXACT palette. Finally go back to your original 32 bits image and convert it to indexed colors using the PREVIOUS palette and the most appropriate dithering.

The important step is the dithering. Without that, on device, your images would look exactly as the posterized version.

Note that you might have to slice the image and repeat the process to obtain an EXACT palette.

The image might not look as nice on desktop as it used to, but it should at least look the same on desktop as on device. On to part two!

Image re-compression

Isn’t PNG compressed already? Of course it is, but don’t you think we can do better? In most cases we can. Most image editors add metadata in one form or another to PNG files. In most cases this is not needed, and chopping it away can save a lot of space. In one project my final zip file went from 300kb to measly 50kb by using these techniques.

To business. You might know about the PNG compressor "PNG Crush". It was the first I ever heard about, but it seems there are some others out there as well. The most famous are OptiPNG and PNGOut.

How do they compare? They're roughly the same. So which one you use is not important; the important thing is that you actually use one of these. Therefore; accessibility. Neil Turner has a very good article on adding PNG Crush to the right-click menu of PNG files (for Windows). No need to copy his blog post, go read it!

The problem with PNG Crush is that it can't replace the current file, meaning you will have to rename the result when you're done. That is why I prefer "PNGOut" instead, which can optimize-in place.

As a final mention for you Linux users, here is what our Virtuelvis uses:

(this is using first pngcrush, and then optipng)
Compress every png into directory 'out'

$ pngcrush -rem alla -brute -fix -d out *.png

recompress them

$ cd out 
$ optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 *.png 
$ mv -f *.png ../

(mv -f can be replaced with your favorite windows file moving flavor)

After this optimizing session your PNG images should look better and be leaner than ever before!