Image quality basics
Introduction
Digital image files quality and file size are determined by ...
1 Size/dimensions ... expressed as 2 numbers indicating width and height (eg 400 x 200)
2 Resolution ... expressed in dpi (or ppi) ... indicating density of pixels per inch (eg 72ppi). Obviously image size and dpi/ppi are inter-related.
3 Bit-depth ... which determines the number of colour variations each dot or pixel in the image can be.
| Print type | Source image dpi | Print dpi |
|---|---|---|
| Standard print resolution | 375 dpi | 300 dpi |
| Newspapers | 150 dpi | 100 dpi |
| Glossy magazines | 375-450 dpi | 250-300 dpi |
| Billboard posters | 40 dpi | 25 dpi |
| Hi-quality art books & prints | Up to 1500 dpi | Up to 1200 dpi |
Here are some simple rules ...
The bigger the image size the bigger the file size.
The greater the resolution the bigger the file size.
The greater the bit-depth the bigger the file size.
DPI, PPI, and screen resolution is explained here.
RGB and CMYK colour modes are explained here.
Bit-depth & colour palettes
The number of pixels in an image file partly determines its quality and file size, but bit-depth has a more important part to play.
In an image file, Bit-depth determines the the number of possible colours each pixel can be by fixing the number of colours in its associated colour palette.
Colour palettes
The colour of every pixel in a digital image is drawn from a palette of colours which is usually embedded (a part of) in the image file.
For example ... an 8-bit image will have a palette which contains 256 colours. This means that every pixel in that image will be one of these 256 colours. 256 colours are not always enough to produce high quality photographic images but such an image's file size will be small.
To put it another way, the colour of every pixel in an 8-bit image is described by an 8-bit byte. You may wish to read computer counting systems and bit depth if you haven't already done so. Therefore, the colour of every pixel in an 16-bit image is described by a 16-bit byte. Guess what, 16-bit images have bigger file sizes than 8-bit images.
| Bit depth | Example byte | Number of colours |
|---|---|---|
| 1-bit | 1 or 0 | 2 (black and white) |
| 4-bit | 1101 | 16 colours |
| 8-bit | 11001001 | 256 colours |
| 16-bit | 1100101011110011 | 65,536 colours |
| 24-bit | 111011101111001100111111 | Millions of colours |
1 bit image (black and white)
4 bit image example
8 bit image example
24 bit image example
Image optimising (downsampling)
When as image file is converted from a large colour palette format (eg Photoshop) to a small colour palette format (eg 32 colour dithered GIF), the converting algorithm (program) must make some decisions on how the colour of each pixel will be altered. This will involve one of 3 primary processes ...
1 Exact match
There is an exact colour match in the new palette, and no colour change occurs.
2 Substitution
The nearest colour in the new palette is substituted.
3 Dithering
Dithering is the process of combining 2 (or more colours) together in a pattern to deceive the eye into thinking there is 3rd colour. This process is most strongly associated with optimising images for web sites where small file sizes (smaller colour palettes) are desirable.
Dithering example 1
An image with 3 colours is reduced to 2 colours in order to reduce its file size ...
Original 3 colours |
2 colours no dither |
2 colours dithered |
Here is a smaller version of the above dithered image ... 
Dithering example 2
In the examples below the Web safe and GIF no dither examples have used a combination of matching and substitution. The GIF dithered is a combination of matching and dithering and achieves the best file size to quality compromise.
Original |
Web safe |
GIF no dither |
GIF dithered |
Below is a magnified detail of the GIF dithered image file illustrating how the dithering process has attempted to simulate the effect of a colour gradient.
HOW CAN YOU DITHER AN IMAGE?
Programs such as Adobe's ImageReady, Photoshop and Macromedia FireWorks allow different optimisation settings to be tried out and the results previewed. The images above were optimised in ImageReady.
Common palettes (bit-depths)
Here are some common palettes (bit-depths) ...
Back & white
1-bit (1/on/white and 0/off/black)
Greyscale
8-bit. Black and white and 254 shades of grey (256 in all).
Indexed colour
This colour mode involves "imposing" a smaller colour palette onto an existing image with a larger colour palette. Most commonly used when you optimise an image for the web by converting a Photoshop document (24-bit) into a GIF or JPEG.
Indexed colour images are usually 8-bit (256 colours) or 4-bit (16 colours) single channel colour palette. Suitable for flat colour illustrative images (eg logos) and simple photographic images. GIF and JPEGs can be in indexed colour format.
Adaptive colour
The colours in an adaptive palette are drawn from the image itself. This ensures that there are no colours in the palette which aren't in the image, thus keeping palette. size/bit-depth as small as possible. Therefore the bit depth is variable (8 to 4). Suitable for flat colour illustrative images (eg logos) and simple photographic images. GIF is the most common adaptive colour image file format.
Web safe colour palette
8-bit colour palette containing 216 colours common to the Windows and Mac operating systems. More or less redundant now that most computers can display millions of colours.
RGB
24-bit (8 bits per channel), millions of colours. Suitable for photographic quality RGB images.
CMYK
32-bit (8 bits per channel), suitable for photographic quality CMYK images for print.
Related downloads
None at present
