Print and Screen resolution: Myths and confusion explained.

DPI: Dots Per Inch – Printing

PPI: Pixels Per Inch – on screen

 

Web resolution, and pixel size

Most traditional computer monitors have a screen resolution of 72 ppi. Many devices (tablets, smartphones, laptops, etc.) have screens with a ppi that is theoretically higher; however, because 72 ppi is still the most common screen resolution, most web sites still display at 72 ppi.

For web, instead of worrying about resolution, pay attention to the number of pixels (px) in an image. An image that is 2000px by 1200px at 72 ppi displays at the exact same size as an image that is 2000px by 1200px at 300 ppi. Why is this the case? Raster images are comprised of pixels, the smallest addressable elements in a raster image. When an image size is specified in pixels, the exact pixel ratio (e.g. 2000 px x 1200 px) is being set. The image will always display at 2000 px x 1200 px, because the number of pixels has been specified. Take a look below to see the difference:

Image at 72 ppi, Pixel dimension: 2000px x 1200px

Image at 72 ppi, Pixel dimension: 2000px x 1200px

 

Image at 300 ppi, Pixel dimension: 2000px x 1200px

Image at 300 ppi, Pixel dimension: 2000px x 1200px

 

Though you can “change” the resolution number, the picture’s quality stays exactly the same since the number of pixels is not changing.

Now see what happens when the number of pixels is changed:

Screen Shot 2013-12-10 at 11.26.55 AM

When this is changed (in this case, downsized), the image shrinks. Note under “Image Size”, when the pixel size is set at 2000px x 1200px, the Image Size is 6.87 MB. When the image was downsized to 200px x 120px, the Image Size shrank to 70.3 KB.

DPI does matter for Print:

300 DPI is the most common resolution in the printing world.

In printing, DPI (dots per inch) refers to the output resolution of a printer, and PPI (pixels per inch) refers to the input resolution of a photograph or image.

DPI is the number of dots in a single inch. The more dots the higher the quality of the picture (more resolution, more sharpness and detail). DPI indicates the resolution the printer will output at, since printers break up images into tiny dots.

DPI is calculated by pixels divided by inches, like so:
An image at 300 px wide x 300 px high with a DPI of 100 is 3″ x 3″.

Pixels/DPI = Inches, ergo
 300 / 100 = 3

Untitled

When this image is sent to print, it will print at 3” x 3”. When you scale up the resolution, inch-wise, the image will shrink. This is because when you’re starting from a digital image, this image will have set number of pixels (e.g., 300 x 300px). When sent to the printer those pixels are converted to dots (DPI).

  1. An image at 600 x 300 px with a DPI of 100 is 6″ x 3″
    Inches = Pixels/DPI
    600px / 100 DPI= 3”
    300px / 100 DPI = 3”
  2. An image at 600 x 300 px with a DPI of 200 is 3″ x 1.5″
    Inches = Pixels/DPI
    600px / 200 DPI= 3”
    300px / 200 DPI = 1.5”
  3. An image at 1200 x 1800 px with a DPI of 300 is 4″ x 6″
    Inches = Pixels/DPI
    1200px / 300 DPI= 4”
    1800px / 300DPI = 6”

300 DPI is usually the recommended minimum for printed content that will be viewed from about 10 inches away, e.g. books, pamphlets, or brochures.

The DPI for print jobs like billboards can be much lower because the human eye will be viewing it from much farther way. At such long distances, we can’t detect a large amount of detail.

Here are some basic guidelines for how much detail is needed based on viewing distance:

  1. 6 inches : 300 DPI or greater
  2. 1 foot : 150 DPI or greater
  3. 6 feet : 85 DPI or greater
  4. 10 feet : 50 DPI or greater
  5. 20 feet : 10 DPI or greater

Prepping images for web or print: DPI, PPI, or Ratios?

When it comes to print and screen resolution, the guidelines are fairly simple. For prepping images for the web, don’t worry about the ppi. Instead, simply take note of the pixel ratio (e.g. 300 x 100px), since this is how image sizes are measured on the screen and on the web.

For print, use DPI as your measurement tool. 300 DPI is the standard minimum resolution required for high quality printed images.

You may also like

Leave a comment