020 8607 9535
Web Services
Case Studies

Helpful articles

We are always available to help. Either call us on:
020 8977 8943

Or email us at: support@amazinginternet.com

Digital Imaging Basics

The purpose of this paper is to explain and clarify the terminology with digital imaging as associated with the Internet. It is not a comprehensive document on digital imaging - later papers will cover other areas of digital imaging such as scanning and digital cameras and will rely on the knowledge in this paper. In all cases, the aim is to clarify the technical aspects of the medium and not the artistic aspects.

This paper lays the foundations for future papers on digital imaging and as such aims to give you a working knowledge of the basics so that you more fully understand the digital medium and can therefore produce more effective results.

Be warned that I do get fairly technical at points. Hopefully I manage to convey the information without inflicting too much pain! Feedback, as always, is welcome.

So, in at the deep end…

Bits and Bobs

A digital image is made up of Picture Elements or pixels. You can equate a pixel to a dot - if you look closely at an image in a newspaper or a cheap magazine you can see the individual dots that make up an image. Digital images are the same. Made up of dots called pixels. Many pixels of varying colour combine to make an image.

Which brings us nicely to the next thing you need to know about: colour.

A pixel in an image can be one of many colours. The number of colours available to choose from is defined by the amount of data stored per pixel. The colours that we have to choose from for colouring each pixel is referred to as the palette and is used in much the same way as a painters palette.

A brief sideline on number systems…

Humans use a number system called decimal. It has ten symbols to choose from - 0 through to 9. Computers don't work in decimal but in binary where there are two symbols to choose from - 0 and 1. They use this number system because it is easy to represent using electricity. Imagine a light switch: with the switch on we could have a 1 and with the switch off we could have a 0. This is how computers work - millions of little switches.

A binary digit is called is called a bit. See the following example that compares decimal and binary number systems:

Each digit in a decimal number allows us to represent 10 different values so a four digit decimal number allows to represent 10x10x10x10, or 10,000 (0 through to 9999) numbers. Easy. Now similar to decimal, each bit in a binary number allows us to represent two different values so a four bit binary number can represent a total of 2x2x2x2, or 16, decimal numbers - 0 through to 15. Make sense? Good.

Now that the number theory is out of the way I'll continue with colours.

It is commonly accepted that the maximum number of levels between black and white that the human eye can easily distinguish is less than 256. So in a greyscale (black and white and shades between) image we usually have 256 shades of grey to choose from in colouring each pixel. This is stored in 8 bits of information or data (2x2x2x2x2x2x2x2 = 256).

A Splash of Colour

Do you all remember art class from school and the primary colours? Red, Green and Blue. The usual way of representing a colour image in digital format is in red, green and blue (RGB) colour combinations.

It makes a certain amount of sense that we use 8 bits of data for each of the three colours. So a colour image has 24 bits of data for each pixel giving a total of 16,777,216 colours in the palette (I'll not write out all the 2's!) Having 24 bits of data for each pixel is generally referred to as 'true colour'.

RGB colour is not used for print applications. If you have a colour printer then you'll know that the printer inks are Cyan, Magenta, Yellow and sometimes black (CMYK) - i.e., the secondary colours plus black. So for a CMYK image we would usually have 32 bits of data per pixel.

Dimensions and Resolutions

When talking about the dimensions of a digital image there is often much confusion. The basic rule with the dimensions is that a digital image is made up, at the lowest level, of pixels. So giving the dimensions in pixels is unambiguous.

But how big in pixels is an image that is 6x4 inches? Well that depends on the image resolution. An image's resolution is given (usually) in dots per inch (DPI). So if the image is 150 DPI, the image size in pixels is 6x150 by 4x150 or 900 by 600 pixels.

The use of resolution is for when you are displaying or outputting an image. If you want to print out an image and your printer prints at 600 DPI then you can work out how big in pixels you need the image to be to get a 6x4 inches output.

When it comes to displaying images on websites and on your computer, the resolution most commonly used is 72 DPI.

Most digital imaging software allows you to choose how to dimension the image - you can work in centimetres, inches or pixels. For print applications, you would normally work in centimetres or inches. When working with images for the web, it is often easier to work directly in pixels.

Image File Sizes

Digital images contain lots of data which means that when you save an image on your computer, it can take up lots of space. This can be alleviated by choosing an appropriate image format to save in - I'll cover this below. First a little computer theory:

We already know that data on a computer is represented in bits. Because there are lots of bits of data, we have ways of representing the large numbers in easier ways. First, 8 bits of data is called a byte, so 7 bytes of data would be 7x8 or 56 bits of data.

In decimal, when we have a thousand of something, we tend to divide the number by 1000 a stick a kilo in from of the appropriate unit. For example 1000 grams is also called 1 kilogram. The same is done with bytes of data in a computer with one difference - we don't divide by 1000, since this is a decimal convention, but by 1024. I'll explain why:

1000 in mathematical terms is 10 to the power of 3, written 103, or 10x10x10. In binary, everything is related to the number two so it makes a certain amount of sense that 1024 is a power of two, in fact 210, that is, 2x2x2x2x2x2x2x2x2x2.

So 2 kilo-bytes of data is 2x210 or 2x1024 or 2048 bits of data1. Kilo-bytes is abbreviated KB. Similarly we have mega-bytes and giga-bytes which are 220 and 230 respectively and are abbreviated MB and GB.

Now we have the computer theory out of the way, let's look at typical image sizes. Say we have a 6x4 inch image at 150 DPI. That's 900x600 pixels. So the total number of pixels in the image is 540,000 - a little over half a million. Now if it is a colour image there are 3 bytes of data per pixels which means a total of 1,620,000 bytes, or 1.54MB of data! So you can see that images, when saved to your computer, can be large files. When we put images on a website they need to be significantly smaller than this if we don't want the download to take a long time.

Image Formats

When we save a digital image on our computer, we have to choose an image format to store the image data. There are lots of different image formats to choose from - I'm only going to cover the applicable ones:

Bitmap: This is essentially raw image data. Generally not useless as the data is not compressed in any way resulting in large file sizes.

TIFF: Tagged Image File Format. This is similar to a bitmap but extra data can be included, such as transparency, and the image data can be compressed to reduce its size. All of the image data is stored. This is a good format for saving your images on your computer.

GIF: Graphics Interchange Format. This format has a maximum palette size of 8 bits per pixel. The palette-reduced image data is also compressed. Gif is good for web images with few colours or large areas of flat colour. If is not good for photographs because of the reduced palette. Also the compression used on GIF does not work well where colours change lots as in photographs. It does work well on things like logos and similar images.

JPEG: Joint Pictures Expert Group. This format has a true colour palette. Although JPEG images can be CMYK, they are almost always RGB for web and screen purposes. JPEG images are a compressed format but, unlike GIF and TIFF, a lossy compression technique is used to reduce the image data size, i.e., data is thrown away when saving. The amount of data thrown away is determined by the quality factor - the higher the quality factor, the less data that is thrown away. JPEG is an excellent format for saving photographs for Internet use because of the amount of compression that is achieved. There is one gotcha though - don't re-save JPEG's as each time you save you throw more data away. This is why I recommend using TIFF for saving images on your computer.

1 Kilo-byte has been used historically to mean 1024 bytes. Because of the confusion and dual meaning whereby a kilo-gram is 1000 grams and a kilo-byte is not 1000 bytes, there is alternative terminology for binary numbers although is rarely used. This can be found here: http://physics.nist.gov/cuu/Units/binary.html

Last revised: 23/08/2002
For broad publication - Copyright notices and acknowledgement must be maintained