How to Size Raster Images in Photoshop CS6 for Optimal Onscreen Display - dummies

How to Size Raster Images in Photoshop CS6 for Optimal Onscreen Display

By Barbara Obermeier

Viewing raster images onscreen in Adobe Photoshop Creative Suite 6 can be tricky because pixel dimensions come into play — especially if you’re putting images on the web — because the display of images is based on 1 image pixel per 1 screen pixel. The most important issue, then, is making sure that your image fits inside your (or your audience’s) monitor when viewed at 100 percent.

When you view an image onscreen, the display size is determined by the pixel dimension, plus the size and setting of the monitor. You therefore need to determine what monitor resolution your audience is likely using and size your graphics accordingly. For example, an 800-x-600-pixel image might display differently, depending on monitor resolution.

Size of Monitor Resolution (in Pixels) How Does an 800-x-600-Pixel Image Display?
27-inch monitor 2560×1440 The image fills a tiny portion of the screen.
22-inch monitor 1920 x 1080 The image fills a small portion of the screen.
17-inch monitor 1024 x 768 The image fills part of the screen.
17-inch MacBook Pro monitor 1920 x 1200 The image fills part of the screen.

You may also hear people referring to monitor resolution in graphic display standards, such as XGA (1024 x 768 pixels), UXGA (1600 x 1200 pixels), WQXGA (2560 x 1600 pixels), and so on.

Resolution is measured in pixels per inch, or ppi. You may also run across the term samples per inch (spi), often used when talking about scanners. Another term you see often is dots per inch (dpi), always used in reference to printers, imagesetters, and other paper-outputting devices. You may hear people refer to dpi as printer resolution.

When displaying images onscreen, the recommended resolution setting is somewhere between 72 ppi and 96 ppi, even though resolution isn’t really a factor in preparing screen images. That’s just because monitors display somewhere in the 72- to 96-ppi range.

So, if you change the physical dimensions of an image, it’s always at a one-to-one ratio with the monitor. If you view an image whose resolution is higher than that of the monitor, the image appears larger onscreen than in print.

For example, try opening (or dragging and dropping) a 300-ppi JPEG file into a browser window. It explodes on your screen. Because the monitor can display only 72 to 96 ppi, it needs a ton of space to show all the pixels.