Optimise images for performance and consistency

In an effort to reduce your website’s page size, whether it be to just provide a better experience for the user or to work inline with Google’s plans to factor page speed into rankings, you will inevitably get to the point of dealing with your site’s images.

In many sites the images take up a large proportion of the site’s weight (in bytes). So getting the most out of them is very important. One tool that is essential in this regard is pngcrush.

pngcrush

Pngcrush is a tool that lossless reduces the size of PNG files. PNG are used mainly for styling the website and so are vital to the look (and often the readability) of the site itself. JPEGs are great for photographs which need no restriction on the number of colours. Compression of JPEGs are dealt with differently. Few modern designers use GIFs anymore now that IE supports alpha transparency in PNGs, so we will assume that we are only dealing with PNGs.

Pngcrush uses a number of techniques to reduce the size of your PNGs such as reducing the palette or applying different compression algorithms to the image data.

Alternatives

There are several other alternatives to pngcrush such as its fork, optiPNG. This does pretty much the same job.

Colour consistency

One thing that pngcrush does that others do not yet seem to do is reduce the file size by removing the colour correction (or colour profile) data from the file. This can sometimes reduce the size by up to 40%. What this also means is that your images will appear more consistently across browsers. How so?

Many image manipulation programs will place a colour profile within the image to enable different systems to display the image as close as possible to the original. Firefox, for instance, will use these profiles to adjust the colours before displaying them. Google Chrome, on the other hand, will not. What this means is that some images on your site will appear differently in Firefox and Chrome. It could also mean that colour values in CSS style sheets will not match those colours, while using identical codes, in PNG files.

The command line to remove all colour profiles from your PNG is as follows:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Conclusion

By removing the colour profile data from your images, you not only reduce the file size but you force browsers (such as Firefox) to make do without the profile and so render them more consistently, with other systems and with CSS colour values. A faster and more colour accurate site.