Web Graphics Guide - Image File Formats

Images provide a visually stimulating medium to enhance a user's experience. So mastering file formats is a critical and foundational knowledge to exceptional web design. Consider them as the ingredients to a web design recipe or the tools for the web design carpenter. You cannot use a screwdriver to hammer a nail and expect good results. Web graphics follow a similar principle.

The currency to web graphics are image quality and file size. The dillemma is between preserving image quality to keep images clean and smaller file size to save bandwidth and decrease page load time. Luckily, the basics only require us to deal with the following three formats: .gif, .jpg, .png.

GIF - Graphic Information Format

- allows up to 256 colors
- can be animated
- features transparencies
- uses a lossless compression (no loss in image quality)

GIF graphics have a 256 color restrictions making it ideal for simple graphics and texts that don't require a lot of colors. Cartoons, logos, charts, texts, all work very well GIF formats. Photo's don't. Simply put, the fewer colors you use, the more efficient GIF files are.

Here are some examples of good uses and poor uses of GIF files:

Good:

Bad:

JPG - Joint Photographic Experts Group (JPEG)

- supports true colors (16 million colors)
- allows varible compression (i.e. it has a "quality" setting with most graphic softwares)
- suffers generational degradation if edited and saved multiple times
- uses a lossy compression (image quality is lost reduced at higher compression)

JPG are commonly misused as the "one-size-fits-all" form of graphics (due to it's compatibility with true colors) at the cost of large file sizes. However, they do excel superbly when displaying photographs or scanned artwork. Since these files uses a lossy compression, unnecessary data are discarded during the compression process and changes are irreversible. As a general rule of thumb when image quality is to be preserved, set the compression to where the decrease in quality is invisible to the naked eye (for
about 20% of the original file size or less.)

Good:

Bad:

PNG - Progressive Network Graphics

- allows 8, 24, or 32 byte storage (256 colors, 16million, or 16mill+alpha transparencies respectively)
- transparencies not supported by IE6
- lossless or lossy compression
- utilizes best of both GIFs and JPGs
- generally poor support for ancient browsers

PNG's are better suited as the "one-size-fits-all" solution since most of the old browsers are obsolete. On a personal note, I'd stay away from transparencies until IE6 becomes obsolete as well. The best time to use PNGis when GIFs are unsuitable (too many colors) and JPG's are overkill - PNG's will come to save the day.

Good:

Bad:

Here's a comparisson chart (with file sizes):

Text

GIF - 2.5kb

JPG - 3.2kb

PNG - 2.3kb

Alba

GIF - 22.8kb

JPG - 13.5kb

PNG - 28.6kb

Apple

GIF - 2.9kb

JPG - 3.6kb

PNG - 6.1kb

As a final note, the best advice I can give you is to always use the Export Preview / Save for Web feature (found under File) in your graphics editor to get the best bang for your buck. You can never go wrong.