RaptorRex

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.
????: NamePros.com http://www.namepros.com/webmaster-tutorials/375997-making-transparent-png-files-work-ie.html

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.

-Nick-

A very good one here.

Thanking you for your contribution.

-Nick.

__________________

DylanButler

Interesting - can you set an area to be transparent as well? As opposed to choosing a color and risking transparent spots all over your image.

Indexed color mode does not support semi-transparency, right? So you'd still have to choose a matte color if you wanted to avoid jaggedness?

Why not just use a GIF?

Great find nonetheless.

__________________
-Dylan Butler

EXAMP - San Diego Web Design

Steve

In this case, I think it would make more sense to use a GIF -- you wouldn't have any semi-transparent areas this way, which is why PNGs are used most. If you need more quality (257+ colors) with transparency for whatever reason, use a PNG.

Still a nice find.

Semi-transparent PNGs work with a piece of Javascript, I believe.

__________________
Steve
NamePros Staff Emeritus

AzN

I never found a way to use GIF without distortion.

__________________
Currently on hiatus. Back whenever.

DylanButler

If you are using photoshop -> Save for Web.. You can choose a 'Matte Color' (default is usually white). Set this color to whatever background color you expect the image to sit on.
????: NamePros.com http://www.namepros.com/showthread.php?t=375997

Yes there is a pngfix.js but it does not always work on first load in IE6. Also it can slow the page because it works off of IE's alpha filter (basically it goes through your document and adds a filter to every image ending in .png).

__________________
-Dylan Butler

EXAMP - San Diego Web Design

RaptorRex

You choose colors not areas. You cannot have semi-transparency with a (indexed) palette. Yes, a matte color is appropriate for the anti-aliasing just like in GIF.

PNG compression is better than GIF compression. Packets are between 500-800 bytes, so you can reduce your fetches accordingly.

You will have the same problems with PNG indexed transparency as you have with GIF but PNG ends up smaller. PNG also supports some extra fields like resolution and background colour. Make sure you null these fields if you aren't using them so as to save more space.

Lord

thanks a lot =) I was actually looking for a long time on how to get/make transparent pngs(or other images)

ended up going through numerous transparent image generators until I could find one (of course, they can only generate text)

thanks for the guide

rajdx

Wow...thanks a lot dude....I'm looking for this for a long time since IE 6 doesnt support transparent PNG....Thank god they made IE 7 support transparent PNG

bbalegere

Wow!
This is a good tutorial.
It will definitely help me.

__________________
Fire-Power Blog-AgniPulse.com
Internet speed test PPC search
Web site hosting review Computer Auctions Computer running slow