Digital images

Graphics on a screen are made up of tiny blocks called pixels. The more pixels on the screen, the higher the resolution and the better the quality of the picture will be. The higher the image resolution, the more memory is needed to store the graphic.

Image files can be either bitmaps or vectors.

Bitmaps

Bitmap images are widely used on digital cameras, smartphones and online. Common bitmap image file types include JPEG, GIF and PNG. Bitmaps are also known as pixelmaps or raster graphics.

Bitmap images are organised as a grid of coloured squares called pixels (short for 'picture elements'). When zooming in or enlarging a bitmap image, the pixels are stretched and made into larger blocks. This is why bitmap images appear as poor quality when enlarged too much.

Graphic illustrating an image of a car enlarged 300%

Each colour of an image is stored as a binary number. In the black-and-white image below, each pixel is either black or white. You need a binary value for each different colour. As each pixel is either black or white, this image can be encoded with a value of 0 for white and 1 for black.

Diagram to illustrate pixels and their make-up.

Vectors

A vector image uses scalable shapes such as straight lines and curves, using coordinates and geometry to precisely define the parts of the image. It is more efficient than bitmaps at storing large areas of the same colour because it does not need to store every pixel as a bitmap does.

Vector graphics can be scaled without losing resolution. They can be enlarged or reduced in size - but the file size will stay almost exactly the same.

Graphic of an image enlarged without being distorted

One of the most common vector file formats is scalable vector graphics (SVG). SVG is an open standard for vector graphics.

It is possible to edit SVG images using numbers to change the size and colour variables in HTML. This is often used for graphs and infographics in HTML5.

Vector graphics are used in:

  • CAD packages
  • AutoShapes in Microsoft Office
  • animated movies
  • encapsulated postscript (EPS)
  • animation programmes such as Blender and Adobe After Effects
  • image manipulation programmes such as Adobe Photoshop and GIMP
  • Adobe portable document format (PDF)
  • Windows meta-file (WMF)

Image display

When a monitor or a printer displays a vector image it is rasterised - converted into a grid of pixels. Regardless of the file type, an image will always be outputted onto a screen or printed in pixels.