How to work with transparent images

Because GIF and PNG images can have transparent backgrounds, it is possible to place them on a colored background or over a background image on a web page so the background shows through. (Read more about images that allow transparency in Which image file type is best.). However, placing a COB photo (“cut out background” or “cut out of background”) or other irregular-shaped image over a background can be difficult. That’s because if it’s not done correctly, you will see a rough, raggedy outline around the image, like the violin on the left and the letter “a” on the left below.

violin violin a a
The two violin photos above have transparent backgrounds and have been placed in a table with black cell backgrounds. The photo on the left shows a jagged white outline, while the one on the right looks great. The two “a” images above have transparent backgrounds and have been placed in a table with blue cell backgrounds. The photo on the left shows a jagged white outline, while the one on the right looks great.

The way you avoid the jagged outline problem is to use the correct Matt color in the Photoshop Save for Web dialog. The Save for Web dialog below shows the transparent “a” original in the upper left, a JPEG in the upper right, a GIF in the lower left and a PNG in the lower right. The gray checkerboard behind the “a” in three of the panes indicates a transparent background. The JPEG in the upper right shows a white background, since JPEGS do not allow transparency.

Photoshop Save for Web dialog

The Save for Web dialog below is the same “a” viewed at 1600%. Notice how the edge of the curve in the original has a series of transparent pixels. This is called “anti-aliasing.” Without anti-aliasing, non-rectagular shapes would all look “saw-toothed” or jagged. In the original Photoshop image, pixels of varying degrees of transparency are possible. However, in the final GIF or PNG web images, transparency of individual pixels is not possible. Therefore, the image edges must be “anti-aliased” for a particular background color. This can be seen in the bottom two panes below. The lower left pane is anti-aliased for a black background. The lower right is anti-aliased for a blue background. The desired background color is selected by clicking the “Matte” swatch. As you can see, Photoshop mixes the transparent pixels in the original with the matte color to yield various shades of two blended colors. When the image is ultimately placed on a background color on a web page that matches the matte color, the edges blend perfectly.

Photoshop Save for Web dialog

Placing a transparent image over a solid color background like the examples above makes choosing the anti-alias (matte) color easy —you just use the background color. But when the background is not one consistent color, like a photo, it gets a little trickier. You must find the happy medium of all the colors around the image.

Leave a Comment