A Complete Guide to Web Design

36 Chapter 3 – Web Design Principles for Print Designers

Graphics on the Web

Web Design in a Nutshell, eMatter Edition

Image size

When a graphic is displayed on a web page, the pixels in the image map one-to-

one with the display resolution of the monitor. Although 72ppi is the standard,

bear in mind that monitor resolutions vary and can run much higher than 72ppi,

particularly on higher-end work stations.

A graphic that appears to be about one inch square on your 72ppi monitor may

actually appear to be quite a bit smaller on a monitor with a resolution of closer to

100. (See Figure 3-2.)

Good-bye inches, hello pixels

Because the actual dimensions of a graphic are dependent on the resolution of the

monitor, the whole notion of “inches” becomes irrelevant in the web environ-

ment. The only meaningful unit of measurement is the pixel.

It is a good practice to create your images at 72ppi (it puts you in the ballpark for

screen presentation), but to pay attention only to the overall pixel dimensions.

You can disregard inches entirely in the web graphics production process. After a

while, thinking in pixels comes quite naturally. What’s important is the size of the

graphic relevant to other graphics on that page and to the overall size of the

browser window.

For instance, I know that many users still have 14" monitors with resolutions of

640 ×480 pixels. To guarantee that my banner graphic will fit in the screen in its

entirety, I would make it no more than 600 pixels wide (taking into account some

pixels will be used on the left and right for the window and the scrollbar). The

size of the remaining buttons and images on my page will be measured in pixels

Figure 3-2: The size of an image is dependent on monitor resolution

72 ppi

Image appears

one inch by one inch

on 72 ppi monitor

100 ppi

Image appears

smaller on

100 ppi monitor

one inch

one inch

one inch

one inch

72 pixels

72 pixels