Understanding Image Resolution: Pixels, Inches, and DPI for Both Print and Web

I get a ton of emails from confused designers asking me to explain the relationship and differences between pixels, inches, and DPI. Rather than write another rushed email trying to explain it in as few words as possible, I figured now would be a good time to show everyone exactly how pixels, inches, and DPI work together in both print and web design.

DPI: A Measurement of Image Detail

DPI stands for dots per inch, and is an easy way to tell how detailed an image can be without actually seeing the image. But what is a "dot"?

"Dot" is an ambiguous term, but for a good reason. A dot can be anything: a pixel, a drop of paint, a spot of printer ink.

Heck, if you're in a sports arena and you look across the stadium, each of the people in those seats can be considered a "dot".

The two most common types of "dots" are pixels (when looking at a computer screen), and droplets of ink (when printing something out).

If you have 1 DPI, then you have a 1 x 1 grid and you're just going to have a solid color in a single square inch.

If you have 100 DPI, that means there are both 100 horizontal dots and 100 vertical dots, which gives you a 100 x 100 grid in a single square inch. That means you have a total of 10,000 individual dots (100 x 100 = 10,000).

You can see that the more dots you have, the more detail you can cram into an image.

Pixels: For Computers Only

Your monitor is made up of "dots" called pixels. You may have heard that monitors display images at 72 or 96 DPI. This may have been true at one point, but not anymore.

If you're creating a design for on-screen display only, you can forget that DPI and inches even exist, because they're irrelevant.

If you're creating a design that is going to be printed, then you'll have to understand the relationship between pixels, inches, and DPI, which I'll talk about later.

Inches: For Print Only

An inch is an inch right? That's true when you're measuring printed items, but since the pixel density — or DPI — between computer monitors can vary, inches have little to no bearing on a design when you're viewing it on a computer.

We all know how to use a ruler, so I don't really need to explain inches in depth (I hope), but how do you know how many pixels something should be if you know the size in inches, or how many inches something should be if you know the size in pixels? Read on.

How Pixels, Inches, and DPI Relate to Eachother

The confusion between how it all works has a lot to do with the fact that even when you're designing something strictly for print, you're obviously going to be looking at it on a computer display. So how do pixels, inches, and DPI fit together?

How to Find the Size in Pixels

Let's say I want to print out an 8" x 10" photo at 300DPI. How do I know what size it should be in pixels?

You simply need to multiply the size in inches by your desired DPI. It all comes down to this simple formula.

Pixels = Inches x DPI

So if my photo is 8" x 10" and I want to print it out at 300DPI, I just need to plug those values into my formula.

Width: Pixels = 8" x 300DPI
Height: Pixels = 10" x 300DPI

So for an 8" x 10" print at 300DPI, my image should be 2,400 pixels wide and 3,000 pixels tall. Simple right?

Using this simple formula, you can easily find out the size in pixels as long as you know the size in inches and the DPI.

This is also helpful to know when you're scanning something, because you know the size in inches and you can set the DPI to whatever you want, so you can easily decide how big in pixels your final scan will be.

How to Find the Size in Inches

Like any good formula, you can find the value of any variable as long as you already have the other two values, simply by moving things around.

Inches = Pixels / DPI

It's the same formula, just set up to find the value of inches when we already know the size in pixels and the DPI.

Now let's say someone sent me a photo that they downloaded from a website. The image is 900 x 600 pixels. They want to know how big it can be printed in inches at 150DPI, so it stays relatively detailed.

Height: Inches = 900px / 150DPI
Width: Inches = 600px / 150DPI

After doing the calculations, I know I can print the image at 6" tall and 4" wide.

How to Find the Quality in DPI

Most of the time, you'll be calculating for pixels or inches, because you will know the DPI ahead of time, but sometimes you'll need to figure out the value for the DPI when you already know the size in pixels and inches.

For example, if I found a cool pack of 3,600 x 3,600 pixel textures online that I want to print out at 12" x 12", there's no way to know how much detail they'll have without first calculating the DPI.

DPI = 3,600px / 12"
DPI = 300

Now I know that if I wanted to use these 3,600 x 3,600 pixel textures in my print work, I could safely print them out up to 12" x 12" in size without seeing a loss in quality.

If I printed them out at 6" x 6", I would get an even more detailed image at 600DPI.

DPI = 3,600px / 6"
DPI = 600

Another thing to keep in mind is that the human eye really can't tell the difference once you get past 300DPI. A 600DPI print is going to look identical to a 1200DPI print unless you're using a magnifying glass, so that's a good reference when considering the quality of your images.

A Little Something Extra

If you see someone advertising a pack of textures as "4,000 pixels (300DPI)" without any mention of inches, they don't know what they're talking about, because the DPI of a 4,000 pixel image is completely dependent on the size you plan to print them in inches.

This is a huge pet peeve of mine, because the majority of emails I get ask something like, "What DPI are these textures? I'd love to use them, but I want to know if they are high enough quality."

If you understand the relationship between pixels and DPI, you know that the answer to that question varies widely depending on how large the person plans to print them in inches.

All you have to know is the resolution in pixels, and you can figure the rest out based on your needs.

Go Forth with an Understanding

If you struggled in the past to understand how pixels, inches, and DPI all worked together, you probably feel like you've uncovered the holy grail.

It can be confusing at first, but by simply knowing the basic formula (Pixels = Inches x DPI), you can easily calculate the values that you need to know.

Is there something you still don't understand? Leave a comment so I can help!