image types

theory topics

  1. Image kinds

  2. Image size and image resolution
  3. Interpolation, scaling and re-sampling
  4. Banding, noise and dithering

1 Image kinds


There are two kinds of images in computers. An image is created and stored in computers in two different ways. Both involve mathematic formulas.


One way is to 'see' an image is as dots known as pixels. Each pixel is a small square. A bitmap image is a 'map' of these pixels. Each pixel has a location, a colour and and in some cases different levels of brightness. The whole image is a series of numbers representing all the locations and colour information or each pixel.


The other way to 'see' an image is to use mathematical formulas to 'graph' lines, curves and shapes. These shapes can also be coloured. This is a vector image.


Back to top


2 Bitmap images


A bitmap image or ‘raster’ image is a picture made and stored by mapping pixels in a grid, recording their position, colour,
and brightness. Bitmap images are resolution dependent. More about resolution later.

The main advantages of a bitmap image are;

The disadvantages of raster images is;

Examples of bitmap images are;


JPG (Joint Photographic Experts Group) = compressed graphic file, used for photos and web because of its variable and high compression.

GIF (Graphic Interchange Format) = used for images of simple solid colour or lines, like flags or logos on the web because of its extreme compression.
Suitable for graphics liek logos not photos. Is limited to 256 colours on a 'colour look up table'.

TIFF = (Tagged Image File Format) – a much lower compression to retain more tonal information for publishing in CMYK colour space.

PNG = (Portable Network Graphics) An image format that can have a transparent background

PSD = (Photoshop) file that can be edited in layers

BMP = Usually an uncompressed file. A Windows native file.

RAW = Uncompressed graphic file from a camera, recording all the information about pixels.


Back to top


3 Vector images


A vector image is one made from shapes described/stored as mathematical formulas.

The main advantages of vector images are;

The main disadvantages of a vector images are;

Examples of vector images are;

AI – (Adobe illustrator) file. A vector file for editing, can have layers

EPS = (Encapsulated Post Script) – a vector file for vector images. Useful because it can be scaled without any
loss of detail or increase in file size

SVG = (Scalable Vector Graphics) Developed by WWWConsortium uncompressed and suitable for editing in a vector editing program.


Back to top



2 Image size and image resolution


When we talk about image size we could mean two things. First we could mean the distance from the left to the right of the picture, usually in centre metres, or secondly, we could mean the amount of information stored in the image.


Both these factors affect the file size or, number of MegaBytes (MB) it takes to store it.

A digital image is made of dots. Dots can be big or small. The size of an image is not created by one thing but is a product of the combination of the number of dots (from left to right) and the size of those dots. Some images are very clear and detailed and some are quite coarse. To compare the size of images then, we need to ensure that the size of the dots in the two images are the same.

The size of the dots, called pixels, is called the resolution of the picture. Pictures of low resolutions have smaller file size than those with higher resolutions.


Different purposes or transmission methods require different resolutions.

Image resolution is expressed in ppi (pixels per inch) or ppcm (pixels per centimetre). The old measure was dpi because this referred to resolution in the process of printing, not in the inherent quality of the image itself. To find out why this is not so in digital imaging click here.


Given that we always want to keep a file a small as possible, then the main factor influencing the choice of resolution for a picture is the viewing devices capability in rendering resolution. (The delivery platform). If you consider your eye as a viewing device for a magazine or book, it can see dots down to about 300 in an inch or 118 per centimetre. The viewing device for looking at the internet, a computer monitor normally renders to 72 ppi or 39 ppcm.


However, now Apple's 'Retina' displays render to 300ppi.


Back to top


What resolution do I need?

Low resoloution, Higher resolution


Both these pictures are the same size in terms of their height and width. However, the left pictue is a magnified version of 72 dpi and the right picture is 4 times as clear (has 4 times smaller pixels). This is a magnification of a 300 dpi picture at the same scale.


If the left picture was 100 kB (kiloByte) then what size wouuld the picture on the right be? Simple, it has 4 times as many pixels so times 100 by 4 and its 400kB.



Back to top


What size is a picture in pixels? Will my image do? Is my camera up to the job?


For screen use or on the Internet, images can be set at 72 ppi or 39 ppcm.


For printing, images must be set at 300 ppi or 118 ppcm.


Look at the following table to estimate how big an original picture must be if you want to use it for web or print.


For web at 39 ppcm or 72 ppi

Size in Millimetres
W x H

100 x 150

100 x 150

A4 portrait 210 x 297

A3 portrait 297 x 420

Size in Pixels
W x H

390 x 585

585 x 780

819 x 1170

1170 x 1638

For print at 118 ppcm or 300 ppi


Size in Millimetres
W x H

100 x 150

100 x 150

A4 portrait 210 x 297

A3 portrait 297 x 420

Size in Pixels
W x H

1180 x 1770

1770 x 2360

2478 x 3540

3540 x 4956



Examine the following image open in Photoshop. This is an image as it came off my camera. What is the maximum size it could be used at for print? Wait, there's a catch to that question? Remember for print we need what resolution?


What would I have to change to really find out to give the correct answer? What do you think will happen to the pixel size when I have made the change?


Lastly, can you tell me what Scale Styles, Constrain Proportions and Resample Image all mean?


setting image sizes


Image/ Image Size in Adobe Photoshop.




Back to top


3 Scaling, interpolation and re-sampling


Scaling an image


When we scale an image we just make it bigger. This is a dangerous practice because the image becomes very coarse as you can see in this example.



interpolation and re-sampling


The image at left has been enlarged to produce the image at right. However, in this case it has retained the original resolution of the smaller picture. Photoshop lets us enlarge an image with interpolation which re-samples the image and adds pixels.


To make a Bitmap image bigger at the same resolution, you have to add pixels. Image software like Photoshop lets you enlarge an image by re-sampling the image. It averages the colours across the image and adds pixels to the file; making it bigger. This is called interpolation.


However, if you just make an image bigger in a word processing or publishing program (Word or InDesign) by dragging it from a corner that’s called scaling. The result of that will be a very bad jagged image if you don’t use interpolation with re-sampling.


Back to top


4 Banding, noise and dithering

When we compress an image to make the file size smaller this reduces the number of tones across colour areas. Imagine a beautiful sunset where the sky is orange at the horizon and blends up to a beautiful red. Above that the sky transitions into a deep blue. The colours graduate from one tone to another slowly and progressively. If the file is compressed too much the tonal steps are reduced. We will notice that tones are not blending smoothly into areas but are forming bands of colours. This effect is called banding. To combat this and improve the image, without (overly) increasing file size a process of dithering is introduced. Dithering is an kind of noise (speckles in still images) that are introduced to break up the lines of the bands. This gives the effect that the tones are, once again blending together.


Back to top