Using Transparent Images on the Web and in Print GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design

A Guide to Working with Transparent Images

Different image formats are ideal for different image use cases

By Sue Chastain Sue Chastain Writer St. Petersburg College Sue Chastain is a former Lifewire writer and a graphics software authority with web design and print publishing credentials. She's also skilled in WordPress administration. lifewire's editorial guidelines Updated on April 28, 2020 Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D Design 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 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: 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. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire How to Make a Roblox Shirt SVG Files: What They Are and How to Open & Convert Them What Is a GIF? 9 Best Free Image Converter Software Programs 7 Best Free Image Hosting Websites PCT File (What It Is & How to Open One) 10 Best Free Photo Editing Programs TGA File (What It Is and How to Open One) ARW File (What It Is & How to Open One) What Is a PSD File? What Is a Gerber (GBR) File & How Do You Open One? How to Make a GIF in Photoshop ABR File (What It Is and How to Open One) ICNS File (What It Is and How to Open One) What Is a PNG File? How to Save Images as PNGs in GIMP Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies