Use transparency and mattes

Transparency makes it possible to create nonrectangular images for the web. Background transparency, supported by the GIF and PNG formats, preserves transparent pixels in the image and allows the background of the web page to show through the transparent areas of your image. (Although the JPEG format does not support transparency, you can specify a matte color to simulate the appearance of transparency in the original image.)

Background matting, supported by the GIF, PNG, and JPEG formats, simulates transparency by filling or blending transparent pixels with a matte color that matches the web page background. Background matting works best if the web page background is a solid color and if you know what that color is.

To create background transparency or background matting in the optimized image, you must start with an image that contains transparency. You can create transparency when you create a new layer or use the Background Eraser or Magic Eraser.

When working with GIF or PNG‑8 files, you can create hard-edged transparency: all pixels that are more than 50% transparent in the original image are fully transparent in the optimized image, and all pixels that are more than 50% opaque in the original image are fully opaque in the optimized image. Use hard-edged transparency when you don’t know the background color of a web page, or when the web page background contains a texture or pattern. However, keep in mind that hard-edged transparency can cause jagged edges in the image.

Preserve background transparency in a GIF or PNG image

GIF and PNG‑8 formats support one level of transparency—pixels can be fully transparent or fully opaque, but not partially transparent. (By contrast, PNG‑24 format supports multilevel transparency; that is, you can have up to 256 degrees of transparency in an image, ranging from opaque to completely transparent.)

Create a matted GIF or PNG image

When you know the background color of the web page on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the web page background.

Create hard-edged transparency in a GIF or PNG‑8 file

Use hard-edged transparency when you don’t know the background color of a web page, or when the web page background contains a texture or pattern. However, keep in mind that hard-edged transparency can cause jagged edges in the image.

Create a matted JPEG image

Although the JPEG format does not support transparency, you can specify a matte color to simulate the appearance of transparency in the original image. The matte color fills fully transparent pixels and blends with partially transparent pixels. When you place the JPEG on a web page with a background that matches the matte color, the image appears to blend with the background.

When you select None, white is used as the matte color.