I recently made what I thought was a transparent PNG but when I uploaded it onto the website it was transparent in Firefox but not in IE6.
After doing some searching, I found the following solution. Apparently IE 6 doesn’t support 24-bit PNGs with alpha channel so you need to convert the image to 8-bit.
- Open the original image.
- Set a proper background colour as oposed to it being transparent. It is best to make this colour similar to the background colour of the website to generate the antialiasing in your image borders in order for the image to blend nicely.
- Flatten the image (Image – Flatten image).
- Add an alpha channel (Layer – Transparency – Add alpha channel).
- Select the background color (Selection – By color).
- Clear the background colour (Edit – Clear).
- Convert the image to indexed color (Image – Mode – Indexed color).
- Save the image to the final PNG file (File – Save as) and remember to check: Save color values from transparent pixels.
November 6, 2006 at 3:41 pm
Very nice, but what’s software you use to do this?
November 6, 2006 at 7:09 pm
As the title of the post suggests, the instructions are for The GIMP. I use this mainly because it is free
December 5, 2007 at 7:54 pm
This is fine but it doesn’t do % transparent. (Translucent) But tanks anyway.
December 23, 2007 at 5:25 pm
That really helped! Thank you!
March 18, 2008 at 7:26 pm
To create a translucent image all you have to do is have a pattern of transparent pixels in the image you want translucent. The more transparent pixels, the more % transparency. Increase depth if necessary.
May 1, 2008 at 3:45 pm
#2 threw me off with “Set a proper background colour as oposed to it being transparent”
How do I do that?
I know the background color I want to use, but how do I set it? (which is kinda the reason I tried this out in the first place…)
July 9, 2008 at 1:30 am
Thanks!
July 18, 2008 at 3:46 pm
Thanks!!!
I was a pain in my neck and I solved thanks to this great explanation!!!
Thanks again,
Regards,
Jhonyleroy.
July 21, 2008 at 8:30 pm
Excellent, I needed this to create some screenshots with transparency for internal docs.
July 21, 2008 at 8:37 pm
Forgot to say THANK YOU!
August 30, 2008 at 8:09 pm
Brilliant!! I don’t like browser hacks, but I ended up trying several to get over this PNG transparency bug in IE6… none of which worked. Thanks very much for the clear step by step instructions. It worked a treat. This is by far the best solution. No hacks required.
January 21, 2009 at 8:43 pm
Excellent instructions! Thanks a lot.
April 24, 2009 at 12:33 am
Many thanks for this, excellent tip
May 4, 2009 at 1:08 pm
[...] The real issue at hand is that IE6 doesn’t support 24-bit transparency. It does, however, support 8-bit. So why not change your 24-bit PNGs into 8-bit? For an entire application, this could become a huge amount of work for very little value added, hence implementation of the Project Atomic fix. However, for those less common instances of PNGs as background images, I have followed Matthew Capewell’s tutorial to transform the 24-bit PNGs into IE6-compatible 8-bit images. [...]
May 23, 2009 at 5:13 am
hmm.. interesting.
August 17, 2009 at 1:46 am
I wish people knew the difference between transPARENT and transLUCENT. *smh*
October 19, 2009 at 7:24 pm
hey! thanks! this worked great!