Wednesday, October 25, 2006

PNGs, transparency and IE

Recently I have been updating my Blogger template for The Ape to incorporate hand-drawn boxes, post-it notes and scribbles. I tested my site on Safari, Firefox, Flock and IE and I had to go to extraordinary lengths to get a respectable result on the various versions of each browser. There two problems with IE: its rubbish implementation of CSS and its lack of support for PNG images.

I should explain web-based graphics are commonly one of the following formats: JPEG for photos, GIFs for images with lots of solid colours or where transparency is required. GIFs can only have 256 colours and its implementation of transparency is crude. A pixel in a GIF image can either be transparent or not, it cannot be semi-transparent.

PNGs seem to be the perfect solution, with 24-bit colour support and full "alpha channel" transparency. This means that each pixel can have a different level of transparency (or opacity) as well as a colour. Below are two versions of the same image, the first is a GIF and the second is a PNG. The images are rendered on top of a background image to emphasise the transparency.

PNG version
PNG version

GIF version
GIF version

In the PNG version, you can see through the coloured shapes and see the background cross through the shapes. The GIF version has solid colours, only the uncoloured pixels are transparent. It can also be seen that the PNG's edges appear smoother because of the alpha-channel transparency and the greater colour-depth.

So why are PNGs not more widely used in Web Design? Because IE's implementation doesn't support transparency properly. That is until IE version 7 was released last week. IE7 finally has full "alpha channel" transparency in PNG images, only six years after it was implemented in other browsers. This leaves the problem that anyone using IE5, IE5.5 or IE6 will not show PNGs properly so PNG images will remain on the fringes until IE7 is the most prevalent browser.

Is there a way round? Not a simple one. I wanted transparent images with semi-opaque drop-shadows for my floating post-it notes on this blog. If GIFs are used, then then the edges look jagged but PNGs render very poorly in older versions of IE. My solution was to have two versions of each image, a PNG and a GIF with the PNG versions used throughout the blog's HTML and CSS code. The images are hosted on an external web server as opposed to the usual Blogger or Flickr servers. This web server detects which browser is asking for each image and serves out PNGs by default or GIFs to older versions of IE. This gives a different quality of graphic depending on whether this site is viewed in IE6 or, say, Firefox.

This is not a viable solution for most people, but I was determined to find a way round.

Labels: , ,


Blogger Polarbear said...

the postits take a long time to download on firefox is that because they are hoste elsewhere?

2:24 pm  
Blogger Glynn said...

just because they're a bit too big, in terms of number of bytes. They could do with being a bit smaller....

3:11 pm  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home