File Formats

Basics	Image Maps	Slices	Rollovers	Animation

Introduction	Introduction	Introduction	Introduction	Introduction
Jumping	Creating	Creating	Creating	Working with Frames
File Formats	Modifying	Modifying	Previewing	Working with Layers
Optimization	Image Map Palette	Slice Palette	Matching Layers	Animation Palette
Saving				Saving Animations

What are the
file formats for
web graphics?

ImageReady and Photoshop work with the Photoshop file format (.psd). However, web browsers cannot recognize that format, and so you must save your files in a format that can be used on the web. You have a choice of four: GIF, JPEG, PNG-8, or PNG-24. Each of these file formats uses compression to make graphics files smaller and therefore quicker to download. Below is a detailed description of each.

GIF
GIF stands for Graphics Interchange Format. Some people pronounce it "jiff", others "giff". The file extension is .gif.

GIF is an 8-bit color format, which means that it can save up to 256 different colors. The GIF format compresses large areas of solid color while preserving detailed areas. This fact, plus the 256-color limit, make GIF a good format for line art, logos, or type. It is not so useful for photographs, which have many more than 256 colors and which have smooth color transitions rather than sharp edges.

GIF uses a "lossless" compression method patented by CompuServe. This means that no information about the graphic is discarded in the compression process. However, if you begin with a graphic that has more than 256 colors, you will lose color information if you save it as a GIF. (ImageReady lets you add lossy compression to a GIF file, in order to reduce the file size even more.)

GIF supports animated images, background transparency, and background matting (blending edges with a web page background). The GIF format is supported by all graphical web browsers.

JPEG
JPEG (or JPG) stands for Joint Photographic Experts Group. It's pronounced "jay-peg". The file extension is .jpg.

The JPEG format supports 24-bit color, so JPEG graphics can have up to 16 million colors. This allows JPEG graphics to preserve subtle variations in color and smooth gradients. For this reason, JPEG is good for photos and other gradient-like images. On the other hand, the JPEG compression method can degrade sharp detail in images containing type, line art, logos, or vector art.

JPEG is a "lossy" compression technique, which means that it compresses by selectively discarding data.
It can reduce files sizes to about 5% of their normal size, but some detail is lost in the compression. When saving a file as a JPEG, you can choose how much compression you want to use. At higher quality you get a bigger file but a better image, and vice versa. You can control the trade-off. Another benefit of JPEGs is that you can create a "progressive" JPEG, where a low resolution image is displayed on the web while the higher-resolution one is downloading.

JPEGs, however, do not support transparency. Transparent pixels are filled with the Matte color in the Optimize palette. So if you have a graphic with a transparent background, set the matte color to the background of your web page. If you don't know the background color, or if it's a pattern, don't use JPEG.

The JPEG format is supported by all graphical browsers.

Tip: Because JPEG is a lossy compression technique, you will lose too much image quality if you save a file as JPEG, then open it again, make changes, and save it as a JPEG again. Always open the original .psd graphic, make the changes, and then re-create the JPEG version.

PNG
PNG stands for Portable Network Graphic. It's pronounced "ping". The file extension is .png.

The PNG file format was designed to replace GIF, because GIF compression is patented by CompuServe and software developers that use it (such as Adobe) have to pay a royalty. PNG, on the other hand, is free for everyone.

There are two types of PNG formats: PNG-8 and PNG-24. (The number refers to 8-bit or 24-bit color.) Here is a description of each:

PNG-8
The PNG-8 format supports up to 256 colors. Since it works very similarly to GIF, it makes a good replacement for it. It is useful for line art, logos, and type; it is not such a good format for photos or smooth color transitions.

PNG-8, like GIF, uses a lossless compression method. In general, a graphic compressed with PNG-8 will be 10-30% smaller than the same graphic saved as a GIF. However, GIFs can be smaller with very simple images.

PNG-8 supports background transparency and background matting.

PNG-24
The PNG-24 format supports up to 16 million colors. Like the JPG format, PNG-24 is able to preserve subtle variations in color and smooth gradients, so it is excellent for photographs. In addition, like GIF and PNG-8, it saves sharp detail, and so it also lends itself to line art, logos, and illustrations with type.

PNG-24 uses same lossless compression as PNG-8. Unfortunately, PNG-24 files are usually significantly bigger than their JPG equivalents.

Like PNG-8, PNG-24 supports background transparency and matting. The format also has the ability to do multi-level transparency, saving up to 256 levels of transparency to blend the edges of an image smoothly with any background color.

Only the most recent versions of Netscape Navigator and Microsoft Internet Explorer now support both flavors of PNG and their advanced features, like multi-level transparency. Unfortunately, older browsers do not support these file types and won't be able to display graphics in PNG format.