The DPI Myth: Forget DPI and Embrace the Pixel

The transition from print to screen from a designers perspective hasn't been the smoothest. In the early days of the web, graphic designers who had spent their careers designing brochures and billboards were tasked to create experiences for this new screen medium.

Naturally their muscle memory would apply print design principles to the screen. What we ended up with is a lot of fixed width websites that looked the same on whatever device you used. Granted, at the time most computer sported 800x600 15 inch displays (or 1024x768 if you were really lucky) so it mostly worked.

The responsive design era

The smartphone era brought with it the idea that screen size was supremely flexible. The same website had to look good on a display width of 320 pixels as 1920 pixels. This led to the rise of responsive design, the idea that the site could morph to accommodate whatever screen size it was given.

Pixel density vs DPI

To say that DPI is irrelevant for screen mediums is not totally true, but its application is based on the screen itself and not on what is displayed on it. Pixel density refers to the number of pixels that are squeezed into a specific amount of space. We can use the term PPI (or pixels per inch) though that's not a widely used term.

If we use the common denominator of what I see marketed as FHD (full HD or 1080p), that gives us 1920 pixels across and 1080 pixels down. When we spread those pixels over a 24 inch monitor we get a pixel density of roughly 92. At that same resolution on a 50 inch screen we have a much lower pixel density of around 44.

That means pixel density is not based on an image, but on the screen size itself.

Forget DPI - embrace the pixel

The goal is still to make sure you are using up all the pixels you are given. If you want an image to take up half of a full HD screen (1920 x 1080) then you should provide an image that is at least 960px wide.

That is until I write that blog that explains how a pixel is not really a pixel anymore. Until next time!