DPI is often misunderstood

I lurk on the Figma subreddit quite a bit (mainly to answer questions, but also to stay in touch with what our customers are saying about the product). Recently I stumbled across this comment:

It was a comment that was not only objectively wrong (that isn't how DPI works), but there were also at least 2 other people who also thought the same thing. Even more worrying, there were multiple comments like this. DPI was being misunderstood, and I was curious how pervasive it was.

I sent out a Twitter poll asking a simple question:

One third of people got this wrong. This is also among an audience of people who were primarily designers, not just a random sample of the population. It seems like the mental model most people have is "more DPI = more pixels", which while they're often correlated, isn't quite right. Let's dive in.

What the hell is DPI?

DPI (aka dots per inch¹) is a measure of density. Pixels are an absolute value. To easily draw a comparison, these two questions are effectively the same:

In the same way that the weight doesn't change with a change in density, the pixel count doesn't change with a change in DPI. What does change in both cases is the physical size of each. A 1000x400 image at 72dpi is 13.89" x 5.56". At 300dpi it's 3.33" x 1.33".

Consider this example:

In both situations, the pixel count is the same. Both have 4 pixels, but the one on the left has twice the DPI (and thus half the physical size).

In the digital world, we've often moved past using physical size as a concept³. There's simply no way to contol what size an image is displayed as. A 4k TV might be the size of a phone or a billboard - the pixels are the same on each. That's the good news in all of this. Despite a strong lack of understanding of DPI as a concept, unless you're working with print media, you don't need to worry about it.

You can sleep soundly knowing that when you output a 1920x1080 image, it will always be 1920x1080, regardless of the DPI.

---