Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

Resolution Explained

This page is aimed at beginners. It offers a brief discussion of resolution - what it means, how it's measured, and which resolution is best to use.

Generally speaking, a higher resolution (bigger value) means higher quality of image - but it also takes more memory to display and edit, and takes longer to output.

Resolution splits into three different catergories - image size in pixels, dots per inch (dpi) and colour depth. Read more about them below.

Pixels

If we increase the display resolution to a large-ish resolution (as I write this anyway), such as 1280x1024, we fit many more pixels into the display. But because your monitor has not changed size, the pixels have become smaller to accommodate. Thus everything on screen becomes much smaller.

The advantage of using higher resolutions is that smaller pixels let us display images with much more detail. Have a look at that handy space scene nearby. You should see there are three copies of the image. The biggest one is the original image, at a resolution of 350 by 253 pixels. The second biggest is the image at 50% size (175x127 pixels). The third and smallest image is at 25% size (88x64 pixels). Can you see as much detail in the second image as in the original? What about in the third image? As the pixel size decreases, less detail can be seen - because the entire image is being fitted into less space. Something has to go!

Dots Per Inch (dpi)

Suppose you use a screen resolution of 1024x768 pixels. The actual size of the display as you see it varies depending on how big your monitor is. DPI comes into play as a measure more of image quality. The more dots per inch there are, then the greater the detail can be shown on the screen.

This is best illustrated with a picture. You should see three copies of part of our space scene, all of the same size. The picture on the left is the original. The middle picture is at half the dpi. The rightmost picture is a quarter of the dpi.

As you can see, as the dpi decreases, the picture becomes more blurred. Again, a low dpi means the dots are very big, and this makes it difficult to draw detailed objects or smooth lines.

It's worth noting at this point that the typical dpi for a printer is 300/360dpi for a laser/inkjet printer at low-resolution, 600/720dpi for an inkjet at high resolution, with some even going as high as 1440dpi; monitors vary, but MS Windows assumes the screen display is 96dpi. Scanners have optical resolutions up to 400/600 dpi (which is usually plenty).

Although dpi only really applies to output devices and scanners, image files can be said to be a given dpi, as well as having a pixel resolution. Different software handles this in different ways. Generally, the dpi determines the size of the printed image. Each pixel is assumed to be one dot, logically, and the more dots per inch the smaller the image will print. Conversely, if the image output size is kept the same, increasing the dpi increase quality - until you reach the dpi of the output device.

A word on scanners - scanners sometimes have a series of fixed resolutions available, so you'll have to pick a best match for your use. Try the summary for an example. Scanners also have two maximum resolutions - optical resolution (using just the lenses in the scanning head) and interpolated resolution (a higher resolution made by the scanner guessing at the data that should have have been in the scan if it could have scanned it optically). It is usually best to stick to optical resolution if you can - and at 400dpi or even 600dpi, this should be plenty for most cases. 150dpi makes a good everyday scanning resolution.

Colour Depth

The term colour depth comes from the way a computer's display is made up. It is visualised as a stacking series of "bitplanes" - the method behind this is more complicated than I wish to get into right now, but you can think of it as stacked panels of glass, some coloured, some clear. (Not a perfect metaphor, but it will do for now.) More depth means more panes of glass (i.e. more bitplanes).

Colour depth can be talked about in two ways. The easiest is to just state how many colours a picture uses. Normal computer resolutions include 2-colour (mono), 256 greyscale (shades of grey only), 256 colour, 65536 colour (65 thousand colour), and 16.7 Million colours. Sometimes, you may see 32768 (32 thousand) colours too. It's worth noting that a 256 colour pictuer (for instance) may not actually use all 256 colours, but that is the resolution required to display it properly.

You may also hear colours listed as bit(plane)-depths. This is usually easier to say. Typical resolutions include 1-bit (mono), 8-bit, 16-bit and 24-bit. To work out how many colours that is, simply calculate 2 to the power of the number of bits. So 8-bit is 2 to the power of 8, which is 256 colours. Sometimes, you may hear of 15-bit (32 thousand colours), and sometimes 32-bit or 24+8 bit. Rarely is 32-bit actually (2 to the 32) colours - it is usually the same as 24+8 bit. 24-bit is also called "true colour" - in theory, the eye can't reliably distinguish any more colours than this. The extra +8-bit is used as an alpha channel. This is an 8-bit greyscale image, used to do fancy transparency effects - and it is very powerful. Most good image editors support alpha channels.

If this is getting confusing, it is probably time to have a picture. I'll just quickly note that 8-bit greyscale is as good as 24-bit colour in terms of quality (apart from a lack of colour). The reasons are again complicated - but just note that less colours are needed to attain a high quality using greys only.

So - the picture then. You should see four rectangles, each coloured with a gradient from blue to white. Here's where the demonstration falls apart (so soon!). If you are using an 8-bit display, the computer will usually only display images using a 216-colour palette - and this will mean the images will not look correct for the demonstration. Bad luck.

If you have a 16-bit or better display, then the top left rectangle should appear to smoothly change from blue to white - this is a 24-bit image, the pinacle of quality. The top right rectangle should look very similar - this is only an 8-bit image. Note how it is still very good. The 8-bit image has an optimised palette - that is, the colours it uses are matched as closely as possible to the original image, so it still looks very good.

The bottom left image though, has only got a 3-bit (8-colour) palette. Again, this is optimised, but because there are only 8 colours available, the image cannot represent the smooth transition in colour. You should be able to see the bands where the colour changes very clearly. So what about the bottom right picture? Is this an 8-bit image again? Nope. This is another 3-bit image. But this time the image is "dithered". This uses a scattering of pixels of different colours to produce an image that looks very like the original, even though it has many less colours.

In general, image files don't need to be huge - if done carefully, colour reductions can be very difficult to detect.

Which Resolution is Right for Me?

In general, to be sure of best quality, use images with the same dpi as the output device. There is another school of thought which says that you only really need to use images at half the dpi of the output device - I still don't know exactly how this works, but it is quite well known, and half the dpi will do you fine for most tasks.

Avoid resolutions much smaller than the output device if you have enough memory in the computer, because low-res pictures will essentially be stretch up to the output resolution, which often looks quite nasty.

If you are only ever working with images for the screen, it is usually easier to forget dpi, and just think in pixels.

And finally - colour depth. It always, always is best to use 24-bit images while you are working on them. The software will give much better results. For saving to disk in final form, you could reduce the number of colours - simples logos or graphs look good in 256 colours or less (if you use dithering), which saves RAM. Photos really want to be in 24-bit colour though. For printing, A whole host of problems arise from differing colour spaces - I won't go into those here, but it is usually best to send the full 24-bit colour image to the printer, and let it work out how best to render it for printing.

Summary

Phew! I feel I owe you all an apology for being so wordy and writing so much. Just to finish off, here is a quick and easy summary.

Typical media resolutions (and accompnaying typical scanner resolution best matches) are given in the table below. These are not hard-and-fast, they are guidelines only.