Making an image transparent with GIMP

I'm not a graphic designer, so if I need an image for my website, like a loading animation or an "error" icon, I'll often just do a Google image search. One quality that I look for in images is that they have transparent backgrounds. Images with transparent backgrounds tend to look nicer because they allow the background color or background image of the website to show through the image. Images without such backgrounds are surrounded by an ugly white square.

An image without a transparent background.

However, it is possible to add transparency to a non-transparent image. I'll show you how to do this using the free, open-source GIMP image editor.

1. After opening the image, the first thing to do is add an alpha channel. This is a special layer in the image that defines exactly where the image is transparent. Go to "Layer > Transparency > Add Alpha Channel"

   
   Adding an alpha channel.

2. Next, select the parts of the image that you want to make transparent. This can be done using the Fuzzy Select Tool. This tool will select all parts of the image that are similar in color to the part of the image that you click on. You can increase or decrease the sensitivity of this tool by adjusting the Threshold setting (this is helpful if the background is similar in color to the foreground).

   
   The Fuzzy Select tool

3. Then, go to "Edit > Clear". This will delete everything that you've selected with the Fuzzy Select Tool and expose the transparency layer.

   
   The image after the background was cleared.

4. You're now ready to save your changes. If the image is a JPEG, you'll have to save it in a different format because JPEGs do not support transparency. PNG supports all levels of transparency, so, for example, you can make one part of your image 100% transparent and another part 30% transparent. The GIF format supports complete transparency, but not partial transparency like PNG does. GIF images do not support many colors, however, so if you are making a JPEG image transparent, it's best to save it as a PNG because JPEGs tend to have a lot of colors in them.

The webpage background can be viewed through transparent images.