» Cross-platform PNGs
Posted: September 2nd, 2009
I had a chance to check out my website on a Mac today, only to find that Safari is having trouble displaying the PNG images that I use around my site.
PNG is a great choice for the simple images used for casual decoration as the compression is efficient and lossless; making the images small but perfect. The common alternative is to use JPEG, which has a very good compression but is lossy, causing ghastly artefacts to appear on simple images (it works very well on rich images such as photos).
I knew Internet Explorer has trouble with transparency in PNG images, but there is some magic that all browsers do (or don’t do) to make PNG files look correct. Safari doesn’t make the necessary calculations meaning that the images won’t match the background colours you set in your CSS.
The solution is quite simple; remove the extra colour information from the file so nobody gets confused:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
Ubuntu users can install pngcrush via aptitude. Thanks to Trevor Morris for providing the solution. (His site has further technical details too).