digitalfoo.net :: GIMP: Create PNG Images with Full Transparency Support in ALL Web Browsers

GIMP: Create PNG Images with Full Transparency Support in ALL Web Browsers

Aug 14, 2009

To make a long story short, transparency is a P.I.T.A. if you plan on exposing your image to older web browsers. The transparency in your image might appear to work as planned in the more recent browsers, but the same image can often result in an array of funky colors where the transparency is supposed to be in older browsers.

Transparency is a must on today's Web and, unfortunately, old and outdated browsers are still prevalent enough that you have to take them into considering when building/designing a website. Though some statistics might cite that older browsers have a minute market share and choose to neglect them in the design process, those same viewers could be a click on an ad, a purchase at your store, or remain valuable in some other aspect.

Using the GIMP, cross-browser transparency support is easily accomplished with a few clicks. The following list of instructions is, verbatim, what needs to be done to export the image correctly.

Image -> Flatten Image
Layer -> Transparency -> Add Alpha Channel
Select -> By Color OR use the Fuzzy Select Tool with thresholds on the GIMP toolbox
Edit -> Clear or DEL on the keyboard
Image -> Mode -> Indexed...
File -> Save As... -> filename.png
(yes to defaults)

The GIMP (GNU Image Manipulation Program)

Details on the GIMP can be found on plenty of sites around the Web. I will say, though, that the GIMP is an uber-powerful, multi-platform, free and open source image editing suite that has many of the features found in high-end graphics programs (Adobe Photoshop, etc). I will not say it is as powerful or easy as it's expensive counterparts, but I will personally vouch that it has proven to be the perfect tool for the job in my life for the past 6 years.

As with any program, learning to utilize all the of features in GIMP can be overwhelming, but in time you can be just as productive in the GIMP as you can in the higher-end suits... for free. And once you learn those features, you can further extend the GIMP's feature set with an abundance of custom scripts and plugins that are also freely available!

Downloads and various installation notes for the GIMP can be obtained by visiting the GIMP downloads page.

The GIMP is a multi-platform program. This means that it can be executed on multiple operating systems, and you can reasonably expect it to be available for most any mainstream(ish) operating system (Windows, Linux, FreeBSD, etc). Check out the download page mentioned above for more specific scenarios involving different operating systems.

Creating a Browser Independent PNG Image with Transparency

The following will be a verbose description of the numbered list mentioned at the beginning of this post.

Example

For this demonstration, I created a simple div layer with a background gradient that will make it easy to see the changes when we finally edit in the transparency. Just in-case you wanted to follow along, the sample image can be downloaded here (right-click the link, Save As...) and the code for the div layer is posted below.

(save by right-clicking link, Save As...) gradient.png gnu_non-transparent.jpg gnu_transparent.png

<html>
<body>
  <div style="text-align:center; background:url(path/to/gradient.png) repeat-x; padding:1em 0;">
    <img src="gnu_non-transparent.png" alt="non-transparent image" />
  </div>
 
  <br /><br />
 
  <div style="text-align:center; background:url(path/to/gradient.png) repeat-x; padding:1em 0;">
    <img src="gnu_transparent.png" alt="transparent image" />
  </div>
</body>
</html>