The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Web Graphics

Transparency

GIFS & PNGS

The GIF file format enables designers to designate one color of a graphic to be transparent. If a transparent graphic appears on a colored or textured background you will be able to see the background through the transparent parts of the graphic.

The figure below illustrates the problem with non-transparent graphics. Notice that Figure 1 has the white background of the GIF appearing against the grey background of the table. Figure 2 is the same graphic except saved in GIF format with the same grey as the background color of the table as the transparent (matte) color. Notice that the background color of the table cells appears.

Figure 1

airstream on a white background

This is an image with a white background saved in GIF format.

Figure 2

airstream with transparency and grey matte color

This is the same graphic in GIF format with transparency checked and grey selected as the matte color. This will anti-alias the image to the color you choose, avoiding a fringy edge.

There are many tools to specify a transparent color in a GIF file. It is probably best to perform this task when you are originally saving the graphic. For example, to specify a transparent color in Adobe PhotoShop, choose Save For Web. This will take you to a new window. Choose Gif, check transparency and then select the matte color you want to blend into the background. The active screen will have a black outline. The bottom choice of jpeg is not active.

this shows the interface
PNGS

PNG Files, or Portable Network Graphics are Macromedia Fireworks native file format. PhotoShop also allows you to save PNGs. The very best quality of the PNG is the variable transparency attribute. This is different from a GIF, which has only one color designated to be transparent. The variable transparency allows you to smoothly anti-alias any graphic onto any kind of background, whether is solid, patterned or a photo. It also lets you have semi transparent graphics allowing the background to show through. PNGs without transparency show up normally in all browsers, PNGs with transparency will show up normally in most browsers with the exception of IE 5.5+ on the PC. To get them to show up here, try this method. Here are a few examples of the same graphic that uses a drop shadow and a semi transparent color bar saved as GIF, PNG (8bit) and *PNG(32bit), The best transparency is the PNG 32, but its a larger file size. As always, the best bet is to save your graphic the smallest file size that looks good. In the below examples, The PNG 8 is perfect for the black background, and has the smallest file size, on the next row, the png 32 looks best, but if you selected white as your matte color, the PNG 8 would suffice. In the last row, the multi-color background demands the PNG 32.

*In PhotoShop, PNG 32 are called PNG 24 (24 bits for millions of colors, the other 8 bits is for the alpha channel)

GIF with black matte color over black background
- 7 K 		PNG 8 with black matte color over black background
- 6 K 		PNG 24(32) over black background
- 25 K
gif example over black png 8 example over black png 24 example over black
GIF with black matte color over white background - 7 K PNG 8 with black matte color over white background - 6 K PNG 24(32) over white background
- 25 K
gif example over white png 8 example over white png 24 example over white
GIF with black matte color over multi-color background
- 6 K		 PNG 8 with black matte color over multi-color background
- 6 K		 PNG 24(32) over multi-color background
- 25 K
gif over multi color background png 8 over multi color background png 24(32) over multi color background

 

 


  Updated 2006 August 14
  Teamweb at UT Austin
  Comments to www@www.utexas.edu