UNIVERSITY of VIRGINIA
Computer Science
Research  Teaching  People  Community   

Search
Directory
Contact Us		  
Undergrads • Grad Students • Faculty • Staff • Alumni • Locator • Phones

Image Formats Tutorial

The time it takes to download a web page and the quality of the graphics on the page are significant factors in the judgement that a reader forms of the page and the authors of the page. Because of this quality images, properly compressed, are quite important. This page aims to introduce several image formats and clarify when it is most appropriate to use which.

Image formats overview

JPEG
The JPEG format uses lossy compression to achieve high levels of compression on images with many colors. The compression works best with continuous-tone images, that is, images where the change between adjacent pixels is small but not zero. JPEG images generally store 16 or 24 bits of color and thus are best for 16- or 24-bit images. Due to the noticeable loss of quality during the compression process, JPEGs should be used only where image file size is important, primarily on web pages.

GIF
The GIF format uses lossless compression to achieve medium levels of compression on images with up to 256 colors. The compression works best on images with few colors or images in which one color is dominant. GIF compression acts best on identical, adjacent pixels (or rows of identical, adjacent pixels). GIFs can store any number of colors from 2 to 256 and are often the best format within this range. There is no loss during the compression process as long as the original image had fewer than 256 colors.

Also notable about GIFs is the fact that they can be transparent, animated, or both.

The key to using GIFs effectively is to use the smallest possible number of colors. Many colors retain their full quality with as few as 32 or even 16 colors. Experiment and see how few colors you can use without harming image quality -- using fewer colors improves compression significantly.

PNG
The PNG format is a recent one that aims to solve some of the problems of GIF compression. PNG is lossless like GIF but supports larger numbers of colors and more flexible transparency. PNG is, however, not widely supported yet. Don't use it for web pages.

TIFF
The TIFF format is rarely seen on the web because it offers poor compression. However, TIFF files can store up to 24-bit images with no loss, making them better than JPEG files for archiving images when space is not critical.

Choosing an image format

If your image is... like this sample... then...
A 16- or 24-bit scanned photograph sample Use JPEG.
Computer-drawn line, block, or cartoon art sample Use GIF.
Computer-drawn continuous-tone art (plasma, gradients, etc) sample Use JPEG.
Black and white sample Use GIF.
Text on a plain background sample Use GIF.
Transparent or animated (no sample) Use GIF.
Predominantly (say, 80% or more) one color (no sample) Consider using GIF.

Clearly, many images won't fit perfectly into any of the above categories. The key to picking the right image format is to save the image in both formats: as a JPEG and as a GIF with the smallest possible number of colors. Whichever produces the smaller file without overly compromising quality is the correct format.

References

  • http://www.adobe.com/studio/tipstechniques/GIFJPGchart/main.html

    UVa CS Department of Computer Science
    School of Engineering, University of Virginia
    151 Engineer's Way, P.O. Box 400740
    Charlottesville, Virginia 22904-4740
    (434) 982-2200  Fax: (434) 982-2214     		Web Comments: webteam@cs.virginia.edu
    Admissions Inquiries: inquiry@cs.virginia.edu
    Site directory, Other addresses
     Server statistics
    © Created by the CS Web Team