Grauw’s blog

The weight of images

July 2nd, 2007

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 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.



what stripes? by GuyveR800 at 2007-07-03 16:16

I hadn’t even noticed there were stripes ^^;
Have to zoom in on the picture to see them, possibly because my CRT isn’t as sharp anymore as it was a few years ago.

Anyway, good suggestions for those who care about IE compatibility ;)

Re: what stripes? by Grauw at 2007-07-10 13:25

Hehehe :).

Well, most interesting to me is the reduction in image size. IE compatibility was more of a side note, which just happened to take two paragraphs to explain ;p.