home projects speaker
buy me a coffee? sponsor me!

How to make a transparent png that IE6 supports with The Gimp

Written by Alexander
Note

Please note that this is an archived post, so links, code and the communicated message might be outdated. YMMV

Quick short and simple!

  1. Open the original image.

  2. 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.

  3. Flatten the image (Image - Flatten image).

  4. Add an alpha channel (Layer - Transparency - Add alpha channel).

  5. Select the background color (Selection - By color).

  6. Clear the background colour (Edit - Clear).

  7. Convert the image to indexed color (Image - Mode - Indexed color).

  8. Save the image to the final PNG file (File - Save as) and remember to check: Save color values from transparent pixels.

About the author

Hi! My name is Alexander, and I am a creative frontender, specializing in UX, accessibility, universal design, frontend-architecture, node and design systems. I am passionate with open source projects and love to dabble with new emerging technologies related to frontend. With over 26 years of frontend experience, I have earned the right to be called a veteran. I am a lover of life, technologist at heart. If I am not coding, I am cooking and I love whisky and cigars. Oh, and coffee, I LOVE coffee!

If you want to know more about me, here is some links you might want to check out: GitHub, Instagram, Twitter, LinkedIn, CodePen, Slides.com, npm,

Speaker

I am also an avid speaker on several topics! Check out some of the things I speak about, and contact me if you are interested in having me at your next event!