Raster vs. Vector Images

Send article Send article Print article Print article

Web Graphics

December 1, 2007

You can work with two types of images in most image editing programs: raster images and vector images.

Raster images

A raster image contains a grid of individual dots (pixels) of color. Digital photographs and most images you see on the Web are raster images.

The image at the right shows the pixels of the thistle magnified by 1200%.

Thistle pictureThistle pixels

Resizing a raster image

Each raster image contains a fixed number of pixels. For example, a 640x480 image contains a grid that is 640 pixels wide by 800 pixels high, for a total of 504,000 pixels. The more pixels the image contains, the more color detail the image contains. More pixels also indicate a larger file size.

  • When you make the image smaller, pixels are removed. The sharpness of the image is reduced and the image may appear blurry.
  • When you make the image larger, pixels are added. The new pixels have an estimated color value based on the surrounding pixels, but image detail is lost and quality is reduced.

In general, reducing the size of a raster image will produce better results than increasing the size of the image.

File formats for raster images

Some common file formats for raster images are:

  • BMP
  • GIF
  • JPG
  • PNG
  • TIFF
  • PSD (PhotoShop)

The file formats used on the Web are GIF, JPG and PNG.

Vector images

A vector image contains curves and lines that are described using mathematical equations. The curves and lines are called paths and are assigned properties of color, fill and outline. Most clipart and illustrations made up of shapes and lines are vector drawings.

The skull image at left is a simple vector drawing; the right image shows the vector path that describes the skull.

Vector image vector path for skull

Resizing a vector image

Vector images are small in size because they contain only the definitions of how to display an object and not the object data. Vector images can be scaled without loss of quality.

File formats for vector images

Some common file formats for vector images are:

  • EPS
  • AI (Adobe Illustrator)

Before a vector image can be viewed on the Web, it must be rasterized, or converted to a raster image (GIF, JPG or PNG).

Updated on May 24, 2008