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.
Now see what happens when we increase the displayed size of the images to match the original image size
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.