Selecting the Best File Format
JPEG's vs. GIF's
The most common file formats to use for graphics on the web are the JPEG and GIF. Depending on the type of image you use, one format may be better than the other. The pictures below have been saved as a GIF (left) and JPEG (right). JPEG's handle color changes better, especially in photos. JPEG files will handle up to 16 million colors, and GIF files will only handle 256 colors. Photos will always look better AND be smaller files if they are saved as JPEG files.
 |
 |
| GIF 89 K | JPG 29 K |
The pictures below are both in 256 colors (256 shades of gray). Even with the lower number of colors, the JPEG is smaller, because the picture is a photo.
 |
 |
| GIF 66k | JPG 16k |
GIF's are better for images with fewer color changes and images with solid colors.
 |
GIF 3k |
 |
JPG 5k |
In this example, the GIF is not only a smaller file, the colors are purer than in the JPG. Look closely, and you'll see the JPG is splotchy.
 |
 |
| GIF (zoom) | JPG (zoom) |
There are two other considerations when looking at the GIF format: animation and transparency. Animation permits a GIF to be played as a movie within your browser without a special plugin. An animated GIF is actually a series of individual pictures that have been "stacked", and are shown one after the other. The downside to animated GIF files is that their file size can become quite large. The animated GIF below is 22k.
Another useful property of a GIF is the ability to select one color to be transparent. Either the "U" or the "F" in the picture at the bottom is surrounded by the color black. Black has been made transparent, so the white page background appears all around that letter. Click the "example" link to see what's going on, and when this sort of thing is useful.
 |
 |
|
| Animation (22k) |  |
Transparency (example) |
When saving graphics in the GIF format, make sure to use anti-aliasing. This process (examples are below) will blend the edges of the image with the background. If you zoom in, an anti-aliased image will have shades of colors that create a smooth transition to the background color, especially when the graphic contains curves.
 |
 |
 |
 |
| Anti-Aliasing | No Anti-Aliasing |
Summary
If you are ever in doubt as to which format (GIF or JPEG) is the better one to use for one of your graphics, save the file in each format, and compare the file sizes. If the image quality is similar on your graphics, use the one with the smaller file size.
