How Screen Resolution Affects Picture Size

Ever wonder why a picture looks great on one computer, but not so hot on another? --Or why your pictures seem to mysteriously grow or shrink when you view them on different computers.  It all has to do with pixels and resolution. This brief tutorial will help you to unravel the mystery..

First, lets get familiar with the way your computer draws images on the monitor.
Your computer monitor draws everything that is displayed on it with tiny colored dots. These dots are called pixels.
When we discuss screen resolution, we discuss it in terms of the number of dots (pixels) drawn horizontally across the screen, and vertically across the screen.  So, for example, a screen resolution of 640 x 480 would indicate that the computer has been set to draw a maximum of 640 pixels horizontally and 480 pixels vertically on the screen. That's a total of 307,200 pixels!

. A few years ago, when the average monitor size was about 14 inches, it was common for computer users to set the screen resolution to 640x480.  Thats a lot of dots to draw on a small screen, and more dots drawn in less space means sharper images. The classic example of resolution is a glossy magazine picture.  If you look at the picture up close (perhaps with a magnifying glass) you will see that the picture is actually composed of many tiny dots.  However, the dots are so small and so tightly packed that the picture looks very sharp from only a few inches away.
Now, however, screen sizes of 17 inches are common and 19 inches is becoming increasingly more common.  On these "big" screens, a resolution setting of 640x480 does not work so well. Why? Because 640 pixels are not so tightly packed when evenly spaced across a large monitor. The only way to make the pixels fill the space is to draw larger pixels, or leave spaces in-between the pixels. Eigther way, a resolution of 640x480 will look visibly grainy on a large monitor.
So, how do computer users with "big" monitors keep their screen resolution looking sharp?

The answer is simple; -Increase the screen resolution!  On larger monitors screen resolutions are often set to  800x600, 1024x768, and higher produce sharp images.

How does this affect the way my images will appear on the screen?  Lets use a sample image to illustrate the point.

Suppose the picture to the right of this frame (statue) is 200 pixels wide and 420 pixels tall.  Lets look at how the image would appear on a monitor at 3 different resolution settings.
Here is the picture on a monitor set to 640x480
Same picture, same monitor, but now at a screen resolution of 800x600
...Now 1024x768
Now that I understand the relationship between picture size and screen resolution; --how can I make sure that my pictures will display the way I want them displayed?
The general rule is to design the picture for the ouput device upon which it will be displayed.  This is obviously problematic since you don't always have control over other people's display devices, particularly when you are designing web page graphics for the entire world to see. The best you can do is design with the most likely situations is mind.  Here are some general guidelines.
1.. First, determine the resolution of your own screen.  Do this by right-clicking any unoccupied point on the windows desktop.

A pop-up menu appears. 


2. Click "Properties".
3. The "Display Properties" dialog appears.

Click the "Settings" tab.
The resolution adjuster and indicator appears.

All you really need to do here is make a mental note of your screen resolution; -or you can change the screen resolution with the slider to see how your monitor displays graphics at different resolution settings.
Knowing your screen resolution will help you to make decisions about how to size your images for yourself and for other potential viewers.  For instance, imagine for a moment that you have a screen resolution of 640x480.  A picture sized 160x120 pixels will occupy about 1/4 of your screens width and 1/4 of the screen's height.
Now, how will the same image look on screen with a resolution of 1280x960?

As you can see the picture is now only 1/8th of the screen's width and 1/8 of the screen's height.

If the picture contained important minute details, the viewer would probably not be able to see them.  --If, however, the picture was merely illustrative, then the reduction in size might not merit concern.

Let's assume for the moment that the picture DOES contain minute details that are deemed important.  In this case we would want to increase the size of the picture, even if it means that the picture will be very large on a low resolution screen. 

Using the sample screens from above, the picture would need to be resizd to 320x240 pixels in order for it to occupy 1/4th of the width and 1/4th of the height on the high resolution screen.  The trade off is that the picture will now occupy 1/2 the width and 1/2 the height of a low resolution screen.  Most importantly though, both users will be able to see the important details.


Now that you understand the relationship of picture size and screen resolution you will be better able to make prudent decisions when sizing your digital photos and artwork.