|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
Killer Web Design Tips, Secrets and Techniques.
Thread: Making transparent PNG files that work in IE (without filters)
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 4
|
|
| Author |
|
RaptorRex
Advanced Member Joined: Sep 16, 2005 Post Count: 126 Status: Offline |
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. Supporting sample images are available at http://upwithabang.com/png-transparency.html 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. |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Paint Shop Pro does it using the alpha transparency option for png8's. I saw this the other day that talks about how to do it in Fireworks: sitepoint.com/forums/showthread.php?p=3549169#post3549169 ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
lwsimon
Advanced Member US Joined: Sep 24, 2007 Post Count: 396 Status: Offline |
Call me dense, but what is the point? The whole point of the .PNG file format is to provide alpha transparency, no? The only thing that I can think of that this would do better than a gif is MAYBE an image with a gradient and transparency. ----------------------------------------  Simple is better. |
||
|
|
webrehash
Stranger Joined: Feb 5, 2008 Post Count: 4 Status: Offline |
I don't know that the whole POINT of png's is to allow for transparency, since gif's allow for it as well. When saving graphics out of Fireworks, I just choose the format that gives me the smallest file size and still preserves the intent of my images. Depending on the palette, it might me a gif, might be 8-bit png, or it might require jpg or 24-bit png. |
||
|
|
|
|
Current timezone is GMT Feb 9, 2010 11:09:47 AM |
