A Guide to Working with Transparent Images

After you remove the background from an image, you're free to re-use it, but the approach you take differs depending on the intended use of the image.

When the Image Is Going to a Screen

Pick one of three on-screen formats: GIF, PNG, or JPEG.

GIF: Graphics Interface Format 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, 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: Portable Network Graphics images 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 Internet Explorer 7 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.

• To retain full transparency without an anti-aliasing halo, 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 create a PNG-32 image.

When the Image Is Going to a Page Layout Application Like InDesign

You have three choices here: Adobe built-in PSD format, embedded paths, or alpha channels.

Adobe built-in PSD format: PSD retains transparency among Adobe applications, so if you are working entirely in Adobe applications, use the Photoshop PSD format with transparency.

Embedded Paths (EPS): EPS images support the use of embedded clipping paths and most desktop publishing applications 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.