Resolution Explained

SPI or Samples Per Inch
Although most scanner manufacturers refer to DPI, they really should refer to spi. Scanners use CCDs (charged couple 
devices) to capture information, and they do this by taking a fixed number of samples per inch. 
The thing to watch out for in scanners is 
optical resolution
vs interpolated resolution. If a flatbed scanner is making 
claims of higher than 600 DPI, you can be pretty sure that they're referring to interpolation. Interpolation increases the 
resolution by software. The highest resolution your scanner can capture without interpolation is the optical resolution.
•
PPI or Pixels Per Inch

---

Finally, your monitor sees everything in pixels per inch. This is really confusing! Most monitors display graphics at 72 
PPI. So if your graphic is 72 pixels x 72 pixels, it's actually one inch by one inch.
What if you changed the resolution of the graphic to 36 DPI? All of the sudden your graphic would be two inches by 
two inches (36 x 2=72). And if you changed the resolution of your graphic to 144 DPI, your graphic would shrink 
down to half an inch by half an inch. 
A brief recap. When it comes to printers, if you increase the DPI of a graphic, it will remain the same size, but it will look 
smoother, because more dots are being used to create the graphic. 
On the other hand, if you increase the PPI that a graphic will be displayed on a monitor, you'll actually decrease the size of the 
graphic. Confused? Let's take a slightly closer look at PPI. 
The Problem with Pixels
 
For printers, a 4 x 5 graphic always remains 4 x 5. Increase the graphic's resolution, and you'll be able to display more shades of 
gray, but the physical size of the graphic remains the same. 
For display, the size of the graphic is dependent on the resolution of your display device. The higher the resolution of your 
display device, the smaller your graphic appears. The resolution of the graphic itself doesn't matter to your monitor. 
The three graphics above all have the same dimensions: 72 x 72 pixels. The one on the left is 36 DPI, the one in the middle is 
72 DPI, and the one on the right is 144 DPI. 
Why are they all the same size? Because they all have the same physical dimensions, 72 x 72 pixels. You can see from this 
example that more resolution (more spi when scanning, for instance) doesn't make any difference when you're displaying the 
graphic on a monitor, like you do on the Web. 
In fact, the higher resolution is wasted on the monitor — but it will result in a larger file size, which means a longer download. 
And you don't want that. 
However, if you were to print out these graphics, you'd very definitely notice a difference. 
Now let's take a look at how these same graphics appear at the most common monitor resolutions: 640 x 480, 800 x 600, and 
1024 x 768. 
The graphics below are actually the same graphic, just resized slightly to simulate the different monitor resolutions. We run into 
that pixel problem again when taking screen captures, because the screen capture program only takes the capture at 72 PPI. You 
can see the same results by changing the resolution of your monitor. 

---

640 x 480 
800 x 600 
1024 x 768 
The above should convince you that it's a good idea to check out your Web graphics in these resolutions, which are the most 
common ones for monitors. Generally, the larger the monitor the higher the resolution it's capable of displaying. Today more 
and more computers are shipping with larger monitors. So what screen resolution should you design for? 
It's a much debated question, and you're welcome to discuss it on the 
bulletin board
. My personal opinion: always check your 
graphics at all three of these resolutions. Just because most desktop monitors can display at 800 x 600 these days, that doesn't 
mean they're actually set to that resolution when they're shipped. Often they're left at the default 640 x 480 (even my 21 inch 
monitor was set at 640 x 480 when it arrived two years ago!). And there are a lot of laptop users out there who can only 
comfortably display 640 x 480. 
Better safe than sorry in my opinion. Nothing like scrolling horizontally to turn viewers off.