Web Design: Why Image and Monitor Resolution Matters - dummies

Web Design: Why Image and Monitor Resolution Matters

By Lisa Lopuck

If you’ve ever watched a movie on your computer or on a high-definition TV, you can really notice the difference in detail compared to a standard TV. This is because HDTVs and computer monitors have a higher screen resolution than normal TVs. Resolution refers to the number of pixels squeezed into a linear inch. Standard computer screen resolutions vary from 72 to 96 ppi (pixels per inch) — that’s a lot of detail. An old-school TV, on the other hand, is nearly half of that, and because most broadcast TV is analog and not digital like your computer, the image is all blurred together.

Computer monitor resolution

Why should you give a hoot about monitor resolution? Because the monitor is your web-design canvas. Although the monitor is a fixed resolution (after all, it is a piece of hardware), graphics come in varying resolutions. In web design, your graphics must match the screen’s resolution.

Although monitors vary from 72 to 96 ppi, the web-graphics standard is 72 ppi. The professional lingo is 72 dpi, which stands for dots per inch, a carry-over from the print industry.

Website image resolution

Here’s a frequently asked question: Won’t a higher resolution image look better on my web page? The answer is no, because even though a 300 dpi image looks great in a printed piece, the fixed 72-to-96-dpi monitor isn’t capable of showing all this detail. Regardless of the image’s resolution, the browser simply shows it by its physical pixel dimension, say 200 pixels wide by 200 pixels high.

Both images in the example contain the same number of pixels. Because the left image is 300 dpi, each dot is smaller, so more dots can be squeezed into an inch. That’s why the whole image shrinks when you print it. The computer monitor, however, isn’t capable of displaying such tiny dots, so it blows each dot up to 72-dpi size. So you’re back where you started — higher-resolution images don’t improve the quality. Ergo, it’s best to just stick with the default 72-dpi resolution in the first place.