Bitmap images

A bitmap image is one which represents the image as a grid of dots. The grid can be any size (within reason) and each dot can be set to a defined colour. Bitmap images work well on computer screens as the representation is the same as the display itself. The basic parameters of a bitmap image are its size (width and height, measured in pixels) and its colour resolution. Colour resolution will be dealt with in more detail later in these notes.

A bitmap file only has enough information within it to display itself at its stored size, although a bitmap can be reduced in size, with no discernable difference from an equivalent bitmap of a smaller size. Displaying a bitmap at a resolution bigger than its native size will result in a pixellated effect. The following three images show the bug at three different native sizes.

High resolution bug, shown at normal size. Medium resolution bug shown at normal size Low resolution bug at normal size

Now see what happens when we increase the displayed size of the images to match the original image size

Medium resolution bug shown magnified Low resolution bug at high magnification

However, just because an image won't lose detail if you make it smaller, doesn't mean that you should store your images at high resolution (i.e. large numbers of pixels). The size of a bitmap file is proportional to the number of pixels in the image. For a high resolution photograph this can mean several megabytes, and some medical images or geographical mapping images can be up to 100 megabytes or more.

Golden Rule 1 - Always resize your image file to the size you need it displayed

The website development team must determine the sizes of images for use on the web pages. There may be two, three or more sizes for any one image as the image may be used in different contexts (e.g. a thumbnail plus a full size image). The team must use an image editing program to resize the images. E.g in PaintShop Pro use the Image|Resize option.

There are several reasons for doing this. The main ones are:

  • A background image specified in a CSS style sheet cannot be resized in CSS.
  • A large image takes longer to download than a small image. If the image is sized to the exact size required on the page you are downloading the minimum amount of data.
Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera