Web Image Formats

Images could be in one of the many image formats. Software used to create or edit image files usually allows saving (or exporting) to a web image format. Web image formats are able to be viewed in a web browser over the Internet.

Raster vs Vector

There are two different kinds of image format, raster and vector based. Raster images use pixels to store colour information. An image is made up of a grid of different coloured pixels. Pixels are represented by 1's and 0's which are called bits. The more bits available per pixel the more colours available but the bigger the file size. The main Raster image formats are JPEG, GIF and PNG.

To reduce the size of a file compression is used. Pixels of the same or similar colour are merged to create one pixel reducing the number of bits needed to describe the colour. Compression reduces the file size but also reduces the image quality.

Vector images use mathematical formulae to store vector information about the image. Vector images can be scaled without loss of quality. The SVG image format is vector based but is relatively new and not widely used by browsers.

Rules of Thumb

Generally the two image formats to use on a website are GIF and JPEG. GIF files are useful for images with up to 256 colours that need to retain reasonable quality. Use GIF for buttons, icons and diagrams.

JPEG images are 'lossy' and lose quality as they are compressed. JPEG is best for photographs and can be compressed by up to 50% without sacrificing too much quality.