When a digital image is displayed on your computer monitor, the size of the image is determined by three things. The Number of Pixels in the image, the Physical Size of the screen and the Resolution of the screen:

1. Number of Pixels in the Object:
The size of an image that displays on your monitor is determined in part by the number of pixels in the image. This one is pretty easy. A graphic object that is designed as 200 pixels wide is going to display twice as wide as a graphic object that is designed as 100 pixels wide.

2. Screen Size:
This one's a little more complex, but still easy to understand. Let's say you have two monitors. One is 14" and the other one is 21". You set both of them to the same resolution, let's say 1024 x 768. Now, both of them are displaying the same number of pixels. A total of 1024 pixels horizontally across and a total of 768 pixels vertically. Each is displaying a grand total of 1024 times 768, equals 786,432 pixels.

Now, if you display a graphic object that is 100 pixels wide by 100 pixels high, it's going to look larger on the 21" monitor. The pixels on the 21" monitor are farther apart. They are spaced at 65 pixels per inch. On the 14" monitor, they are spaced at 95 pixels per inch (ppi). So, on the 14" monitor, the object will be about 1" x 1". On the 21" monitor the object will spread out to approximately 1 1/2" x 1 1/2".

The size of an image that displays on your monitor is determined in part by the the number of pixels in your screen. It's the same object, it just looks bigger on a bigger monitor. You might be able to discern more detail on the bigger monitor, but you will also have a better chance of seeing individual pixels (which is called Pixelization). This is kind of like projecting a movie onto a 10' x 10' screen, then showing it on a 15' x 15' screen. It's the same movie with the same quality of picture. The picture is just blown up bigger on the bigger screen.

3. Screen Resolution:
The size of an image that displays on your monitor is determined in part by the the pixel density or resolution of your screen.

This one can be a little confusing.

Screens resolutions are stated as the total number of pixels horizontally across and then the total number of pixels, vertically.

Computer screen resolutions have continued to increase over the years. In the late 1970s and the 1980s the first monitors used 320×200 and 640×200 dpi resolutions.

The 640×480 resolution, introduced by IBM in 1990, was the standard resolution until about 1996. Then in 2000, the 1024×768 (XGA/XVGA, eXtended) resolution became the standard

Now 1280×1024 (SXGA Super eXtended Graphics Array), and 1600×1200 (UXGA, Ultra-eXtended) resolutions are also becoming popular.

This table shows you the most popular resolutions since 2002. As you can see, users are moving away from the early, lower resolutions and moving to the more recent and higher resolutions:

Screen Resolution in Pixels	Percentage of computer users for each year
Screen Resolution in Pixels	2002	2003	2004	2005	2006
640 H x 480 V	2%	2%	1%	0%	0%
800 H x 600 V	49%	44%	35%	25%	17%
1024 H x 768 V	38%	43%	50%	55%	58%
Higher Resolutions	6%	8%	10%	14%	19%

The maximum number of pixels on a monitor is defined by the hardware and can't be changed, but you can use software to alter the resolution and this will make your images look as if you changed the number of hardware pixels.

As you increase the resolution, a graphic object will decrease in size (although it might appear sharper). If your monitor is set to 800 x 600 and you have an object that is 100 pixels x 100 pixels, and then you change your resolution to 1024 x 768, the object will look smaller.

Why? Because you just increased the number of pixels per inch on your screen. You started out with 800 pixels across your screen and then changed it to 1024, thereby increasing the pixels per inch. If you have more pixels inside of an inch, then 100 pixels will take up less space. Thus, the object will also take up less space and be smaller.

Pixels Per Inch on Your Computer Monitor

The Following Table Sums Things Up:

As you increase the resolution, objects decrease in size because the pixels per inch increases. You are putting more pixels into a smaller area so the clarity wil increase.
As you increase the physical size of the monitor, objects increase in size because the pixels per inch decreases. You are putting fewer pixels into a larger area so you are stretching out the graphic. But the clarity will decrease.

So, the actual number of pixels per inch (ppi) depends on both the resolution and the physical size of the monitor.

Screen Resolution in Total Pixels Increasing resolution ▼ increasing ppi ▼	Pixels per inch for various Screen sizes (Screens are measured diagonally) Increasing screen size ►, decreasing ppi ►
	14"	15"	17"	19"	21"
640 H x 480 V	60	57	51	44	41
800 H x 600 V	74	71	64	56	51
1024 H x 768 V	95	91	82	71	65

As a general rule, most designers will design web graphics to display at 72 ppi.

Although you can see from the table above that none of the ppi (pixels per inch) screen resolutions equals exactly 72, this is a good average for a graphic because if you add up all the ppi numbers for the 800 x 600 and 1024 x 768 resolutions (which have been the most popular resolutions over the last few years) and then divide by 10, you will get exactly 72 ppi.

Most graphics and photo editing programs will have a setting of 72 ppi (or dpi, dots per inch) among their save options since this is considered somewhat of a Web standard.

Did you know that the use of 72 dpi as a standard originated with the early Apple machines?

Click the Tutorial Next button one more time for the Course Completion.