- Impact
- 3
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 files that work with Internet Explorer.
Below is a transparent PNG that shows just fine in IE:
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.
Open an image that requires transparency in GIMP.
In the GIMP menu select Layer->Transparency->Semi-Flatten. What flattening does is to merge items together. In this case you are merging all semi-transparent pixels into solid colours that don't have transparency and fully transparent pixels are kept that fully transparent. After doing this you have either fully transparent pixels or colour pixels. The alpha channel will be gone or useless.
Next you need to change the colour format from 24-bit colour to an indexed palette. 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.
And that is it. In the case of GIMP it will have assigned one palette position to represent a 100% transparent pixel. This is recognized by IE and the transparency will work correctly therein.
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.
Below is a transparent PNG that shows just fine in IE:
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.
Open an image that requires transparency in GIMP.
In the GIMP menu select Layer->Transparency->Semi-Flatten. What flattening does is to merge items together. In this case you are merging all semi-transparent pixels into solid colours that don't have transparency and fully transparent pixels are kept that fully transparent. After doing this you have either fully transparent pixels or colour pixels. The alpha channel will be gone or useless.
Next you need to change the colour format from 24-bit colour to an indexed palette. 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.
And that is it. In the case of GIMP it will have assigned one palette position to represent a 100% transparent pixel. This is recognized by IE and the transparency will work correctly therein.
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.
