Grauw’s blog

Pretty much every site contains a bunch of images, however images on websites are generally fairly sizable, causing significant increases in page load time. Images are often however larger than they have to be, due to non-optimal image compression and the prevalent use of the less-efficient GIF over PNG.

To easily improve this, there is a tool called PNGGauntlet. This tool can make your PNG files significantly smaller by trying out various compression mechanisms and storage schemes, and selecting the optimal one. It works really really well. It can also automatically convert GIF and JPG images to PNG if the PNG version is smaller, which is usually the case for GIF. The 1-bit transparency still works in Internet Explorer 6 even when converted to PNG, so there is no reason to keep using those outdated GIFs!

Using PNGGauntlet to reduce image sizes and move from GIF to PNG can easily cause an overall image size reduction of 10-20%, without any loss in quality. Try it out on your site’s images directory, just drag all your images into the tool and press the ‘Optimize!’ button.

8-bit transparency in IE6

Now that I’m talking about PNG, might as well mention TweakPNG. TweakPNG allows you to add a bKGD background colour to your PNGs. This story isn’t as easy as the PNGGauntlet one above, and not applicable as widely, but this is very useful if you want to use those PNGs with an 8-bit alpha channel to get transparency. For those images, IE6 has a problem where it will not make the image see-through and show the page’s background, instead showing the colour specified in this field instead (and default to gray if absent, which is usually the case). Knowing about this bKGD field, in certain cases this allows you to use PNGs with 8-bit transparency in Firefox and Internet Explorer 7 without a (too obvious) degradation in user experience in IE6.

As an example of this, the logo of this site (the grauw.nl thing at the top of the menu-tree on the left) is transparent. This allows the striped background colour of the tree to shine through, and lets it have a nice shadow effect. In Internet Explorer 6 however, this doesn’t work and it would show up with an ugly flat gray background. So what I have done is set the bKGD colour to the average of the two striped colours, which was a huge improvement for users that visit my website using IE6, the problem is much less obvious now.