Transparency in Images


Today’s Question: Regarding the PNG image format: What does “supports transparency in the image” mean?

Tim’s Quick Answer: Transparency in a PNG (Portable Network Graphics) image means that in certain situations when you place a PNG image against a background, that background will show through in the transparent areas of the image. JPEG images, by contrast, do not support this transparency feature.

More Detail: Transparency can be used in a variety of situations to isolate an area or element within an image and allow another background to show through. This is similar in concept to the creation of composite images in Photoshop, where you use a layer mask on an image layer to hide specific areas, and allow underlying layers to show through in the masked out areas.

With a PNG image, it is possible to preserve transparency in a final derivative image that you can then share in a variety of ways while preserving that transparency. For example, let’s assume you have “cut out” the key subject in a photo, hiding the rest of the image from view through the use of a layer mask in Photoshop. If there are no other image layers below the masked layer, then there will be no pixels in the areas that are masked out. You can save that masked image as a PNG image with the option enabled to preserve transparency.

You can then place that image onto a web page, into a slide show, in a document using a word processor or other software for creating documents, among other options. With any software that supports transparency in PNG images, the background onto which you’ve placed the image will show through the masked out (transparent) areas, so that the isolated subject in the photo will be set against that background.

So, for example, if you have a background texture on a web page or slideshow presentation, the isolated subject in your PNG image will allow that background texture to show through in the transparent areas of the image. Had transparency not been supported, those areas around your key subject would have been white instead, which would not blend in with the background texture where you had placed the image.