Using Images in Web Pages

Image formats for the web

The vast majority of the images used on the web are either GIFs (ending with .gif) or JPEGs (ending with .jpeg, .jpg, or .jpe). Another format gaining usage is PNG (ends with .png).

There are many other image formats in common usage: such as TIFF (files end with .tiff), Windows Bitmap (files end with .bmp), and Photoshop (files end with .psd). However, these images should not be used on the web since they pose browser/platform compatibility problems and take much longer to download.

Fortunately, most image editors allow you to save images as a JPEG or GIF.

When to save as GIF and when to save as JPEG

A general rule of thumb is to save photographs or other images with many colors as JPEGs and to save images with fewer colors and large areas of solid color as GIFs. When in doubt, experiment by saving a copy of your image as both a JPEG and a GIF and see which one provides the best combination of file size and image quality.

The PNG format is an alternate to the GIF format. PNG is a more recent format, allows for more colors than the GIF format does, and has more features than GIF, but only relatively recent browsers (versions 4+) support it.

While the GIF and JPEG image formats are the best choices for displaying images in web pages, they are not the best choice for storing and editing your image files. Images saved as GIFs will be limited to a maximum of 256 colors and JPEGs loose quality with each successive save. These quality reductions are irreversible and will be in any successive copies of the images. TIFF (.tiff) and Photoshop (.psd) formats are much better choices for storing and editing your images.

Further reading

Graphics: Imaging strategies - webstyleguide.com
A brief note discussing image formats and their usage. From Lynch and Horton's Web Style Guide.
You may be prompted to download an SVG viewer when accessing this page. This plug-in is needed to view one of the page's examples. All of the page's text is accessible without this plug-in.

GIF vs JPEG, graphics design tips and resources - Icehouse Designs
A discussion of the difference between JPEG and GIF and when to use each.

Optimizing Web Graphics: Compression - webreference.com
A thorough explanation of GIF, JPEG, and PNG compression.