About transparent and matted web images

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.)

Button with and without transparency
Web button without transparency (left), and with transparency (right)

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.

GIF with and without hard-edged transparency
GIF without hard-edged transparency (left), and with hard-edged transparency (right)

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.)

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF, PNG‑8, or PNG‑24 as the optimization format.
  3. Select Transparency.
  4. For the GIF and PNG‑8 formats, specify how to treat partially transparent pixels in the original image. You can blend these pixels with a matte color, or you can create hard-edged transparency.

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.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF, PNG‑8, or PNG‑24 as the optimization format.
  3. For GIF and PNG‑8 format, do one of the following:
    • To keep fully transparent pixels transparent, and blend partially transparent pixels with the matte color, select Transparency. This option prevents the halo effect you see when you place an anti-aliased image on a web page background that differs from the image background. This option also prevents the jagged edges of hard-edged transparency.

    • To fill transparent pixels with the matte color and blend partially transparent pixels with the matte color, deselect Transparency.

  4. Select a color from the Matte menu:
    • Eyedropper Color (to use the color in the eyedropper sample box)

    • White, Black, or Other (to select a color using the Color Picker)

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.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF or PNG‑8 as the optimization format.
  3. Select Transparency.
  4. Select None from the Matte menu.

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.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select JPEG as the optimization format.
  3. Select a color from the Matte menu: None, Eyedropper Color (to use the color in the eyedropper sample box), White, Black, or Other (to select a color using the Color Picker).

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy