previous next
 

Graphics Files and Formats

Vector and Raster
Graphic
s files fall into two general categories: vector and raster. Vector graphics describe shapes mathematically, whereas raster (or bitmap) files describe shapes as a pattern of dots or pixels. Vector graphics are not entirely supported on the web, but bitmap graphics enjoy widespread compatibility and use on the Internet. For this reason this discussion will focus on bitmap graphics.

Raster or Bitmap Images
Raster or Bitmap graphics are produced by many small dots or pixels. Pixels are dots of color arranged on a regular grid in a pattern representing the image. The more dots a graphic image has, the better it looks, the fewer dots it has, the poorer the appearance.

Bitmap images on the web basically come in two formats: GIF (Graphics Interchange Format) and JPG (Joint Photographic Experts Group). [PNG (Portable Network Graphic) is another format supported by newer browsers but not yet commonly used.] GIF and JPG were specifically designed for network or Internet use combining quality image display with compressed file size for quicker downloading.

GIF or JPG:  Which do I use?

GIF
GIF is a good format for quality and file size when using simple images that only have a few colors. GIFs have a maximum of 256 colors making it suitable for flat-colored illustration. This format compresses an image by counting rows of like colored pixels as a single unit. A graphic containing a number of colors may not be efficiently compressed. GIF files can be given special effects such as background transparency and animation.

JPG
JPG format contains a maximum of 16 million colors and is suitable for images that have an abundance of gradual colors. This format is useful for scanned photographs and other complex images. JPG compression divides the image into a certain number of boxes using a grid format and then saves the predominant color within that box. The compression rate, on most graphic programs, can usually be controlled by the user. The smaller the file size the lower the image quality.

The rule of thumb when selecting a format is where effects such as transparency or animation are desired or where graphics with few colors are used, GIF is preferred. For more complex graphics and photographs JPG is the better choice.

Graphic using flat areas of color.
GIF (3k) JPG (4k)
compression used to save this JPG has compromised the flat areas of color.
Photographic image
GIF (5k)
To reduce file size this image was saved as a 16 color GIF causing the "banding" effect of color.
JPG (5k)

 

  top of page | next