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
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.
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
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.
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...
| 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.