A Guide to Working with Transparent Images

Transparent images in the Save for Web feature in Photoshop

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? The answer depends on where you are going with it.

From Photoshop (versions prior to CS4)

If you are working in Photoshop and going to print or web, view 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. So, the decision comes down to file format.

When 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 colors, and distortion in high color images such as photographs. If the physical dimensions of the image are small, or you will be posting the image to a social media site such as Twitter, then using a GIF image is a consideration. Another downside to GIF is that it only supports 1-bit transparency. What this means is each pixel in your image is either completely transparent or not transparent.
  • PNG: PNG is a format developed to overcome many of the limitations of GIF and a preferable option for transparent images. The file format supports high color and partial transparency using alpha channels. 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: if you want to retain full transparency without an anti-aliasing 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 colors though. This is a standard 24-bit image with an extra 8-bit greyscale channel used for transparency. When you are 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 color or to use the Fill command to fill the selection with the solid color.

When 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, 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.