Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



PNG transparency in Internet Explorer 6.*

Related Articles

There is a general belief that IE6 does not support transparent PNG files at all. This isn't actually true. IE6 supports PNG transparency in indexed mode (a palette) but not in 24-bit color mode. I'll describe what this means and how to create the all elusive transparent PNG that work with Internet Explorer.

See the examples below as a demonstration of PNGs in IE6.




PNG files can store color information in two ways: on a palette and in RGBA mode. A palette reserves a fixed number of colour slots where each slot can store one color. A full palette usually has 256 available slots, therefore 256 colours available for the image. Any colour can go into a colour slot. The 256 colours could all be shades of red, or be a rainbow spectrum of all colours. Since colours in the image can only be indexed as a colour slot (0-255), each pixel in the image can be represented by a single byte.

RGBA mode provides 4 bytes of colour information per pixel. Each of Red, Green and Blue is given a value of 0-255. One other "channel" is called the Alpha-channel. The alpha channel defines the transparency of the pixel in a range of 0-255. This results in an image being able to display over 16 million colours with a range of transparency for each pixel.

To properly support transparency the alpha-channel needs to be supported. Internet Explorer does not correctly handle the alpha-channel of a PNG file. However IE does support a different kind of transparency which makes it just a flexible as the another kind of transparency-supporting image called a GIF.

A color slot in a paletted PNG can be designated to not be a colour at all, but to be transparent. This means that a pixel defined by this slot simply won't have any colour drawn for it. This is the same method used by GIF and is supported by IE.

To make your PNG transparency work in IE you must convert the image from 24-bit colour to an indexed palette. Then you must assign a palette position to be transparent, or depending on your imaging tool, assign a colour or image area to be converted to transparency. I will describe how this is done using GIMP. GIMP is a free photo editor from gimp.org and although a little difficult to learn at first is very powerful. The principles described here should apply to any good graphics program.




  1. Open an image that requires transparency in GIMP. Let's use my game logo (click to play it) from here:
    24-bit png file with alpha channel

    This is a 24-bit PNG with transparency in the alpha-channel. It has been placed over a rainbow background so you can see where the transparent pixels lie. In FireFox this shows correctly, in IE it does not.
  2. In the GIMP menu select Layer->Transparency->Semi-Flatten. This will remove the alpha-channel and remember which pixels were fully transparent. Pixels that were transparent, but over top of a color pixel (in the case of layers), will now be saved as a colour matching the final colour of that pixel after the alpha value was applied. Put another way, pixels will be assigned as either completely transparent or as a having an colour value.
    a png file with transparency flattened
    This is how transpareny looks after semi-flattening within GIMP. The checkboard area shows what is transparent.
  3. In the GIMP menu select Image->Mode->Indexed. This will open a box to assign settings to your palette. It is best to "Generate Optimum Palette" with 256 colours for photos. If you know you have fewer colours you can choose fewer colours (as is the case for plain logos that have no color gradients). Push "Ok" and save your transparent PNG file.
    a png file with indexed transparency
    The PNG file above will work in IE with transparency being correct.

Although this was done using GIMP, the principles are the same for any image program. Simply flatten your alpha-channel and convert your image to 256 colours and the image program should do the rest.



Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/png-transparency.html'>PNG Transparency</a>