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.

There are really only two ways of displaying a digital image. The image is going to either appear on a screen such as a smartphone, tablet or desktop (or larger) display or in print. Thus the decision comes down to file format.

The image is going to a screen.

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 or banding of colours, and distortion in high color images such as photographs.  If the physical dimensions of the image are small such as 1-inch square or you will be posting the image to a social media site such as Twitter, then GIF is a consideration Another downside to GIF is that it only supports 1-bit transparency. What this means  each pixel  in your image s either completely transparent or not transparent. This means such common techniques as drop shadows and vignettes.
  • PNG - PNG is a 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. PNG images are also commonly seen on mobile devices.
    • 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.
    • Another common PNG format is PNG-32.This is not a 32-bit image with billions of colours. This is a standard 24-bit image with an extra 8-bit greyscale channel used for transparency.In Photoshop's Export As ... dialog box , if you click the Transparency checkbox you are creating a PNG-32 image.
  • 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.
    • That is one way of doing it. Another is to use use a selection tool to either mask out the area of solid colour or to use the Fill command to fill the selection with the solid colour.
  • 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.
  • 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.

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.

Updated by Tom Green .