Notes on file formats for images to be used on the web.

Traditionally web browsers have required that images be stored in either GIF or JPEG format. Though some browsers may read other formats (e.g., plugins are available for TIFF), these two formats are widely used. Because of the proprietary nature of GIF files, PNG format is becoming slightly more popular as an alternative to GIF.

GIF has the advantage that the image will appear on your readers' screens much as it appears on yours -- pixel values (colors) are stored truthfully in gif, without loss or compression. Its primary disadvantage is that an image must first be reduced to a 256 color "palette" using the "best" 256 colors that match the original colors. If one is working in greyscale or black and white this is not a problem (since greyscale uses only 256 shades of grey to begin with), so GIF presents a faithful presentation of the image. Where the 256 color palette can be problematic is when the true color values are important to the original image. Note that the IE and Netscape appear to agree on only 216 web standard colors however and that some migration of colors may occur regardless.

   

various gradients in jpg (left) and gif (right) formats.
Note the pixellization of the image on the right side.

JPEG format uses file compression to shrink the file size of the image. Unfortunately, the file compression is "lossy" meaning that the original file (in RGB mode) differs from the file converted to jpg format, that is, that information is lost. The amount of compression can be selected by the user -- the less compression, the higher image quality and vice-versa. Usually, if high image quality is chosen, the differences will be undetectable, but sometimes edges of objects within jpg versions may become blurred.

 
jpg (left) and gif (right) versions

As a rule of thumb with numerous exceptions: use jpg for photos and gif for vector-based images.