1. Technology

Transparency From Here to There

Using Transparent Images on the Web and in Print


Save for Web in Photoshop

Save for Web in Photoshop allows you to compare transparency in Photoshop, PNG, GIF, and JPEG files.

© S. Chastain

So, you just painstakingly removed the background from an image and now you want to use the partially transparent image somewhere else. What do you do? Well, the answer isn't simple--it depends on where you are going with it. So let's take a look at your options.

From Photoshop (versions prior to CS4)
First, if you are working in Photoshop and going to print or Web, check out the Export Transparent Image Wizard located under the Help menu. It will ask you a series of questions and export the image in the appropriate format. This option was removed in Photoshop CS4.

The image is going to the Web.

You have three choices here: GIF, PNG, or "faking it with JPEG."

  • GIF - GIF is the original format with transparency support for the Web. The problem with GIF is that it reduces the color palette to no more than 256 colors, causing color shifts, posterization, and distortion in high color images such as photographs. Another downside to GIF is that it only supports 1-bit transparency, meaning you can't have areas of partial transparency. Each pixel is either completely transparent or not, so you cannot do things like smooth drop shadows that fade away gradually.
    More on GIF
  • PNG - PNG is a newer format developed to overcome many of the limitations of GIF. It supports high color and partial transparency using alpha channels. Although PNG has been around for a while now, it took a long time to achieve widespread adoption due to the lack of browser support in its early years. But transparent PNG files have been supported since IE7, and are supported in all the popular web browsers today, so it safe to use PNG these days unless you know a large portion of your audience is using very old hardware and software. Note that if you want to retain full transparency without an anti-alising halo, you need to save your PNG file as PNG-24 and not PNG-8. PNG-8 is useful for reducing the file size of PNG files when you don't need transparency, but it has the same color palette limitations as GIF files.
    More on PNG
  • Fake Transparency with JPEG - This is a work around where the areas of the image which you want to be transparent are filled with the same background color or texture as the Web page they will be placed on. This works best when placing the image onto a solid colored background, or a small, subtly textured background where alignment won't be an issue.
    More on JPEG

The image is going to a page layout application like InDesign, QuarkXpress or PageMaker.

You have three choices here: Adobe native PSD format, embedded paths, or alpha channels.
  • Adobe native PSD format - PSD retains transparency among Adobe applications, so if you are working entirely in Adobe applications, just use the Photoshop native PSD format with transparency.
  • Embedded Paths (EPS) - EPS images support the use of embedded clipping paths and most desktop publishing applications will accept the EPS format. When embedded paths are used for transparency, the isolated object can only have hard edges. There is no partial transparency.
    More on Paths | More on Clipping Paths
  • Alpha Channels (TIFF) - Alpha channels are bitmap masks that define transparency in shades of gray. When used in page layout applications, the TIFF format is preferred for images with alpha channel transparency.
    More on Alpha Channels | More on Masks

Embedded Paths vs. Alpha Channels - Details on creating and using embedded paths and alpha channels can be found in this five part tutorial from About Desktop Publishing.

The image is going to a presentation program such as PowerPoint for on-screen display.

If your presentation program supports it, PNG-24 is generally the best choice in this situation. If PNG isn't an available in your program, try the other options discussed above.

Related: Which Graphics File Format Is Best To Use When?

Need help with a graphics-related problem? Post in the discussion forum! Here are excerpts from previous discussions on this topic:

Sherrie writes: "I have been using Photoshop Elements to modify images to have a transparent background to be used in printed publications. Apparently, saving it (without flattening the layers) as a .gif is the only way to keep the transparent background. What I'm finding, however, is that when I use these .gifs in other applications (MS Publisher) the clarity is compromised. The edges are rough and pixelated. Does anyone have a better method to cut the background out from an image, make it transparent, and save it as another useable form?" [Full Discussion]

Andrew writes: "Perhaps someone would be kind enough to explain to me how I can create a graphic in Illustrator or Photoshop Elements that I can cut and paste into other programs but without the white background. The white is OK when placing the graphic onto a white page, but not when placing on to a colour page. Is there anyway I can do this please? I have tried lots of things, like cutting out the outline of the shape, etc. each time I don't seem to be able to avoid the white!" [Full Discussion]

©2014 About.com. All rights reserved.