Making Transparent Images

An Overview, with links to tutorials

A transparent image is one in which the background color is invisible. If you place such an image on a web page, the page's own background color or image will display behind your transparent image. This keeps your images from appearing inside a white (or other color) "box".

The JPG image format does not support transparency. GIF and PNG images do, although the PNG format is still not fully supported in some older browsers/versions. However, with a few steps you can turn an existing non-transparent JPG or GIF image into a transparent GIF image.

Transparent images are easy to make, and there are several applications which you can use for this. We've listed several of them here; the basic process is the same, but the individual steps differ, so we included instructions for each application on its own page.

These instructions are for making transparent .gif or .png images, from images which have solid single-colour backgrounds. For backgrounds with bits of shading, you may need to first convert the background to a solid color.

Many of the tutorials include screenshots which can be viewed by clicking the appropriate link. If Javascript is enabled in your browser preferences, each screenshot link will appear as a smaller popup window; otherwise the screenshots will open in your current browser window.

As always, please, observe copyright rules before choosing to display someone else's image on your web page.



Using a graphics program not listed here yet?  Consider writing instructions for creating transparencies with it!  Or drop us a note and we'll either create a tutorial for it, or recommend one!