Introduction
Scanning
The IMG Tag
File Formats
Image Size
Transparency
Image Maps
Animated GIFS

Web Graphics

File Formats

The two most common graphic file formats for the Web are GIF files and JPEG files. Browsers and most popular Web graphics programs support both these file formats. There is increasing browser support of a third graphic file format, the PNG file. This format is a great addition to the current graphic file formats. It's the native file format for Macromedia Fireworks. PNGs with no transparency display correctly in all current browsers. But...one of the really wonderful attributes that .PNG has is *variable transparency.

*A note about the variable transparency option in a PNG. It displays correctly in most modern browsers with one big exception: IE.5.5+ and IE6 on the PC. If you need variable transparency in your PNG, there is a style to include in your css that points to an external script file to make .pngs with variable transparency display correctly in IE5.5+ and IE.6 on the pc, but it isn't a neat solution. Until IE.5.5+ and IE6 for the pc upgrades, this is one working solution we've found. PNG transparency for IE on pc.

Which file format is better? It depends on the nature of the image. The table below summarizes the features of the different file formats and some of their advantages and disadvantages.

GIF	JPEG	PNG
File format is limited to 256 colors.	Format is 24 bit, which supports millions of colors.	Can be 8 bit or 32 bit (24 bit with 8 bit alpha channel)
Best for graphics that have fewer colors and large areas of similar colors. File size of clip-art, graphic text, or banners is usually smaller in the GIF format.	Compressions optimized for photographic graphics with a wide range of colors. File size of scanned graphics will usually be smaller in JPEG format.	Best for similar graphics to the .GIF, or any image that has transparency.
GIF 89A format can specify one color as transparent so portions of the graphic will allow the background to appear.	Does not support transparency.	Supports variable transparency and alpha channel. To get a variable transparency PNG to show properly in IE.5.5+ and IE6 on the pc, you must jump through a few hoops to get this to work. Here's how: PNG transparency for IE on pc.
GIF 89A format supports animation.	Does not support animation.	*Does not support animation a variation of the PNG is the MNG which will support animation.

Below are some examples of a photo and a graphic saved in the three file formats. In each case, I saved it at the minimum of what looked okay. As you can see, JPG works best for photos, GIF works best for simple graphics. PNG can be smaller than a GIF, I'd recommend just looking at the image in the different formats and going with the file format that works the best with the lowest file size for the image. If you have a graphic with transparency in it, then your choices are using a gif or one of the pngs. For more information about transparency, go to the transparency page of this section.

Photo Image Saved as GIF (selective 100% dither) 40 K	Photo Image Saved as JPG (High Quality) 12K

Photo Image Saved as PNG 8 Bit (100% dither) 36 K	Photo Image Saved as PNG 32 Bit 80 K (PNG -24 in PhotoShop with transparency)

Graphic Image Saved as GIF (restrictive no dither) 12 K	Graphic Image Saved as JPG (high quality) 24 K

Graphic Image Saved as PNG 8 Bit (no dither) 20 K	Graphic Image Saved as PNG 32 Bit 40 K (PNG -24 in PhotoShop with transparency)

Services Navigation

Web Graphics

File Formats