Inches, Pixels, and DPI… Oh My!

In the last week or so I’ve had three pals write and tell me they are having problems delivering digital artwork to clients and having said clients complain that the images are “too small” or “too low a resolution”. They are confused about the differences between resolution and physical size of a piece of art, and how those are related and how they are different for print and for web/computer screen display. I thought about doing a mailbag post on this subject, but I think a full blown post/article is in order:

Understanding Physical Dimensions, Pixel Dimensions and DPI

When you are working with a raster image (an image like a photograph made up of tiny pixels or dots) in a graphics program like PhotoShop, you have an option to manipulate the “Image Size” in the menu. There are three elements to the the “size” of a digital image:

• Physical dimensions
• Pixel dimensions
• Dots Per Inch (DPI)

Each of these elements are related to one another, but they mean very different things when it comes to how they appear in print and on your computer screen.

Physical Size: This is the actual size of the image in inches, millimeters, centimeters, points, picas, or whatever form of measurement you use. This means the size (width x height) the image prints at should you print it out on a printer, in a magazine, newspaper, etc.

Pixel Dimensions: This is the size the image appears on your SCREEN. If your computer monitor is a basic HD monitor at 1080 pixels x 1920 pixels, an image that is 1080 pixels tall will fill your screen from top to bottom because your screen is 1080 pixels tall.

DPI: Or “Dots Per Inch” or “resolution” is how many pixels (dots) are used to show your image within a single line one inch in length in print or on a screen. The higher this number, the sharper your image appears in print (up to the limits of the printer), and the larger your image appears on your screen.

It’s that last sentence above where people sometimes get confused… understanding the difference between physical and pixel dimensions, and the difference between how print images and screen images are created and viewed.

Print Images: The actual size an image is printed at (width x height) is determined by the physical dimensions of an image, and nothing else. If you have an image that is sized at 1 inch x 1 inch, it will print at 1 inch x 1 inch no matter what DPI you have the image set to (I know a 1×1 image is small, but it’s easiest to explain with this example).

How sharp and clear that 1×1 printed image looks is determined by the DPI of the image. That 1×1 image at 300 DPI uses 300 dots per line to print the image (at 300 DPI a 1 inch x 1 inch image has 300 dots per line and 300 lines, for a total number of pixels of 300 x 300= 90,000 dots, which is pretty sharp). That same image at 100 DPI only uses 10,000 dots to print the image, but it still prints at the 1×1 physical size. So, you can imagine the same 1×1 inch image printed using 90,000 dots is much sharper than the one printed with only 10,000 dots, since the dots are much closer together and can describe a lot more details. That’s pretty easy to understand.

It gets a little more confusing when you take that same image and open it on a computer screen. What might look nice and sharp on your screen could look fuzzy and lousy in print, because your screen shows you images differently than print does.

In print, the physical size of an image stays the same and the size of the dots that make up that image stays the same, but the DENSITY of the dots gets tighter as the number of dots gets larger in the same space. So if you change the DPI of an image from 300 DPI to 100 DPI, the dots get farther apart, making the image blurrier and less detailed The printer can get them as close together as it is physically capable of doing, which might be 300 DPI or 600 DPI or higher or lower depending on the printer used.

Computer Screen (Pixel) Images: On a computer screen, the dots CANNOT get closer together physically. Your screen is made up of dots aka PIXELS, and those pixels are a set size and distance apart. They cannot move, they can only light up and change color. Therefore how large an image appears on your screen is based on the PIXEL dimensions, which is a combination of the DPI and the PHYSICAL dimensions. This means an image can be the same size on your screen because it is the same PIXEL dimensions, but be totally different in print size.

Here’s an example. These images of Hugh Hefner are exactly the same size at 100% zoom on my screen:

Each is 400 x 544 pixels in pixel dimensions. But the one on the left is 1.333 x 1.813 inches print dimensions at 300 DPI, and the one on the right is 4 x 5.44 inches at 100 DPI. So while they look the same on the screen, if printed they’d look like this:

They look the same size on the screen because your screen doesn’t care what the physical dimensions are, only the pixel dimensions. To your screen a 1.333 x 1.813 inch image at 300DPI and a 4 x 5.44 inch image at 100 DPI are the same size: 400 x 544 pixels. Since your screen pixels stay the same size and distance apart, it displays those two images as the same size because to the screen they are the same: 400 x 544 pixels. However your printer (or magazine, or comic book, or whatever) will print it at different physical sizes because that printer doesn’t care about the pixel dimensions, only the physical ones. It takes the same number of pixels (dots) and squeezes them tighter together or farther apart to match the physical dimensions of the image because the image on the left is telling the printer that is it 1.333 x 1.813 inches and and the one on the right is telling the printer it is 4 x 5.44 inches. Each image contains the same number of dots.

Changing the image size with a program like PhotoShop allows you to choose only ONE of the three different size elements at a time. You can take an image and change either the physical dimensions OR the pixel dimensions OR the DPI. Depending on your settings, PhotoShop will then alter the other size options as appropriate. Here’s our original image of Hef with the “Image Size” box open:

This one is at 1.333 x 1.813 inches @ 300 DPI, so it’s 400 x 544 pixels in size. Now, let’s change the width in PIXELS to 800 pixels wide:

You can see the DPI stays the same (that’s because the “resample” box is checked, more on that in a second) and so increasing the pixel dimensions also increased the physical dimensions. If DPI is constant, increasing pixel dimensions also increases physical dimensions. The image gets bigger both on the screen and in print.

Now, instead of changing the dimensions (pixel or physical), let’s change the DPI from 300 to 100:

In this instance (because of that “resampling” checkbox, again in a second…) changing the DPI only changes the PIXEL dimensions. The physical dimensions stay the same. See how the image got small in the Image Size window? That’s because it is now much smaller in pixel dimensions, only 133 x 181 pixels. It’s still 1.33 x 1.81 inches in physical size, but less pixels because less DPI. It will appear small on the screen, but will still print at 1.33 x 1.81 inches, only with much fewer dots and so much less sharp.

Now, let’s uncheck the “Resample” box. “Resample” means that Photoshop changes the pixel dimensions of an image rather than the physical dimensions when you alter the DPI, as in the examples above. By unchecking “Resample” you now keep the physical dimensions (in our case 1.33 x 1.81 inches) constant and change only the pixel density, or how detailed the image is in print. So if you change the DPI from 300 to 100 like we did above, that is called “downsampling”, meaning you have reduced the resolution of the image, or how many dots are being used, and therefore how sharp it appears in print. If we went from 100 DPI and changed it to 300 DPI in our image, PhotoShop would do its best to create the “upsampled” image to look good by adding the extra pixels (that’s called “interpolation”) to go from 100 to 300 DPI. It won’t be as sharp as if you’d created the image at 300 DPI, but it will do its best to look like 300 DPI.

After unchecking “Resample”, PhotoShop will switch from keeping the physical dimensions constant (in our case 1.33 x 1.81 inches) and keep the number of pixels in the image aka the pixel dimensions constant.

Thus, when we change the DPI from 300 to 100 as above, the pixels dimensions stay the same at 400 x 544, but the physical size of the image changes to 4 x 5.44 inches. The image remains the EXACT SAME SIZE on our screen. All that’s changed is how many inches those exact same number of pixels now cover in a printed version. What the computer screen sees and displays is the same, because it’s the same number of pixels.

It’s even more confusing because the size of the image on your screen changes when you zoom in or out via your graphics program. This has nothing to do with any of the print or pixel settings of your image, it is simply “scaling” the view of the image. Zooming in is like taking a magnifying glass to a painting… the painting does not change at all but you are closer to it and it’s larger in your vision. Stepping back from the painting makes it smaller to your eyes but again the painting has not changed. This image of Hef is zoomed in to 200% for these examples. The image is still the same pixel and print dimensions if I zoom out to 50% or in to 500% or any zoom number. The computer just scales the image to fit your new zoom size by interpolating the pixel info to best portray the image, like if you moved closer or farther away from a painting. At 100% zoom your computer is showing you the image at its “native” resolution, meaning 1 pixel in the image = 1 pixels on the screen.

The bottom line to all this is you should always work on any image meant for print so it is set at the physical print size, meaning the size it will appear at in print in inches, cms, or whatever, and at a DPI of 300. That’s standard for most print images (most magazines, for example, print at 266 DPI, so 300 DPI is a little more than that and you’ll get as crisp an image as the magazine can give you). A full page in MAD is 8 1/8 inches x 10.5 inches, so I do my color digital art for a full page at those dimensions at 300 DPI, which gives me a pixel dimension size of 2438 x 3150 pixels. That’s pretty big on my screen. I work at 50% zoom for most painting because that is a good size on my screen but not so large that I waste a lot of time doing rendering that will be so small on the printed page no one will see it, or it will get muddy looking. The worst thing you can do is spend time working on a piece at a low resolution so that, even if it does look good on your computer screen it prints fuzzy.

Thoroughly confused? It’s not even this simple. Print images are limited in color so a 300 DPI image printed in CMYK won’t be as sharp or as color accurate as it looks on a screen. Other factors with physical printing get involved. It’s a mess. Just remember: for print, work at print size at 300 DPI and ingnore pixel dimensions and you’ll be fine.