The Internet has come a long way from its humble origins, and so have devices. Modern web design needs to be able to render pages on all sorts of different display sizes, from ultrawide monitors, TVs, cell phones, and everything in between. To do this, UI/UX designers must keep a specific measurement in mind: device pixel ratio.
What is Device Pixel Ratio?
Device Pixel Ratio (DPR) is the ratio between the physical pixel density of a device and its logical pixel density. The physical pixels can be seen on your screen, while logical pixels measure how many can fit into each inch or cm (depending on your settings).
DPR is calculated as DPR = Physical Pixels / Logical Pixels
Why Does DPR matter?
Before you start designing and building your website, it’s important to know what device pixel ratio the end user will be viewing it on. The device pixel ratio is a measure of how many physical pixels there are in a virtual inch of space on that device.
Normally, web developers use HTML and CSS to position elements on a page, using CSS’s measurement of pixels for exact placement. However, a CSS pixel doesn’t completely line up with all devices – there are too many different screen sizes to keep up with!
For example, if we have an iPhone 6 with a resolution of 1334 x 750 (375dpi), then this means that there are:
- 1334/750 = 1.6 physical pixels per virtual inch (PPI). In other words, each “pixel” on this screen is 16 x 16 physical units wide by 16 x 16 physical units tall – or 3×3 square blocks total!
This means that if we want something that’s 50px wide on our website design when viewed at 100% zoom level (1x), then its width should be 50 / 3 = 16px for optimal legibility across all devices with different PPIs – including desktop computers!
How Can I Use Device Pixel Ratio in My Design Process?
You can use device pixel ratio to design your website. By using the right size image for the right device, you can ensure that it looks good on all devices. You also have to make sure that your media queries change the layout and CSS changes the font size or background color of elements in different breakpoints.
You can also use Cloudinary to help your site dynamically set DPR for images on your site with a dpr_auto parameter allowing you to set images at different resolutions as needed across your pages. Don’t have a Cloudinary account? Get started today, it’s free!
