Device Pixel Ratio

Glossary

What is device pixel ratio?

Device Pixel Ratio (DPR) is the ratio between physical pixels on a screen and logical (CSS) pixels used in web design. This ratio indicates how many physical pixels are represented by one CSS pixel.

Essentially, DPR helps determine how content is scaled and rendered on different devices.

Formula for DPR

The formula for calculating DPR is straightforward:

DPR = Physical Pixels / CSS Pixels

Standard displays typically have a DPR of 1.0, meaning one logical pixel equals one physical pixel. High-DPI displays like Retina screens may have a DPR of 2.0 or higher, meaning one logical pixel is backed by 4 (that is, 2x2) physical pixels, providing a more detailed and crisp display.

Why Device Pixel Ratio Matters in Web Design

If a 100px by 100px image is displayed on a device with a DPR of 2, it will be stretched to fit the physical pixel grid.

Each original pixel will be stretched across 2x2 = 4 physical pixels. The blurriness is obvious here, as each physical pixel is now averaging the color of the original pixels. This will only get worse with higher DPR values (for DPR = 3, each pixel will now stretch across 3x3 = 9 physical pixels!)

Essentially, you need to serve assets that align perfectly with a device's physical grid, maintaining sharpness. 

But does this mean you should always serve the highest quality image you can? No. Serving the highest-quality image indiscriminately wastes bandwidth and leads to longer loading times. Instead, you should serve images optimized for the device's DPR to balance visual quality with performance.

Let's look at how we can do this.

How to Adapt Images to Different DPR in Web Design

To ensure images look sharp on devices with different DPRs, there a few strategies you can use:

The srcset attribute

The HTML5 srcset attribute lets you provide multiple image sources for different DPR values (2x, 3x, etc.), the browser will automatically select the most suitable image based on the device's DPR.

In the example below, we are using the picture and source tags. The srcset attribute is provided with the source tag.

You can use it with an <img> element as a fallback that will always be loaded if <source> can't find a match, like so:

<picture>
    <source 
        srcset="image@2x.jpg 2x, image@3x.jpg 3x" 
        sizes="(min-width: 768px) 50vw, 100vw"></source>
    <img src="image.jpg" alt="Description" />
</picture>

Alternatively, if you only want to use the img tag:

<img 
    srcset="image@1x.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
    src="image-800px.jpg" 
    alt= "Description" />

Let's take a MacBook Retina, for example (1440px width, DPR 2), with the above markup and the 800px source image.

  • The sizes attribute tells the browser how much of the viewport the image will occupy. The viewport width of 1440px is greater than 1200px, so the fallback condition applies (33vw – the image will be 33% of the viewport width, i.e. 475 CSS pixels). 
  • Since the DPR of this device is 2, the browser will automatically multiply the image's display size by 2 to calculate the required physical pixels, i.e. 950 physical pixels
  • The browser then compares that calculated requirement (950px) to the available image resolutions in srcset and finds that image@2x.jpg (1600px equivalent) is the closest match, while image@3x.jpg is too large. Thus, the former is chosen.

As you can see, while srcset specifies all available image resolutions or widths, sizes help the browser decide how large the image will appear on the screen and which source from srcset matches best.

| Note: You still have to create the images at different resolutions to use in the srcset attribute. Read on to see how you can use ImageKit to solve this.

CSS Media Queries

The concept is the same, but here you're using CSS – and the resolution media feature –  instead of the HTML5 srcset and sizes features. This is particularly useful when you're loading background images via CSS.

/* Standard resolution */
.bg {
  background-image: url('image@1x.jpg');
}

/* High-resolution screens (DPR >= 2) */
@media (min-resolution: 2dppx) {
  .bg {
    background-image: url('image@2x.jpg');
  }
}


/* Same as above, but for compatibility with older WebKit browsers */
@media (-webkit-min-device-pixel-ratio: 2) {
  .bg {
    background-image: url('image@2x.jpg');
  }
}

/* and so on...*/

The dppx unit represents the number of dots per px unit in CSS. Note that the default equivalent of 1dppx is 96dpi. Find out more here.

Leverage a CDN like ImageKit

Both options above require you to create and manage multiple versions of images (e.g., @1x, @2x, @3x). This, however, will complicate workflows and storage. 

Instead, consider ImageKit and its easy-to-use image API, which can dynamically serve optimized images for specific DPR values from a single high-quality original image, saving you a significant chunk of your manual workload.

ImageKit's URL-based image transformation API lets you adjust the image's resolution based on the device's DPR by applying a dpr parameter in conjunction with either the w (width) or the h (height) parameters to specify the device pixel ratio (DPR) scaling.

Here's the syntax breakdown for the transformations you can apply to images using the API:

https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-<width>,h-<height>,dpr-<dpr-value>

So if my_image.jpg were a 1920x1280 image and you needed to serve an image with logical (CSS) width of 800px on a DPR 2 device, you would use this URL:

https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-800,dpr-2

This would dynamically serve a 1600px wide image on such a device.

The dpr parameter in ImageKit can range from 0.1 to 5, and it essentially multiplies the specified width or height by the DPR value to calculate the output resolution, with no extra work needed on your part, and no need to maintain multiple versions of the same image to serve later.

Here's an example of using ImageKit's URL transformations combined with the above methods to serve images optimized for the pixel density from a single source image.

With srcset attribute in img tag

<img 
    srcset="https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-600,dpr-1 1x, 
    https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-600,dpr-2 2x, 
    https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-600,dpr-3 3x" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
    src="image-800px.jpg" 
    alt= "Description" />

With Media Queries

/* Default (for standard resolution) */
.bg {
  background-image: url('https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-800,dpr-1');
}

/* High-resolution screens (DPR >= 2) */
@media (min-resolution: 2dppx) {
  .bg {
    background-image: url('https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-800,dpr-2');
  }
}

/* Very high-resolution screens (DPR >= 3) */
@media (min-resolution: 3dppx) {
  .bg {
    background-image: url('https://ik.imagekit.io/my_account_id/my_image.jpg?tr=w-800,dpr-3');
  }
}

As a developer, the only thing you'd have to worry about is using the right ImageKit transformation parameter, and you'll have a consistent, high-quality experience across all devices, without any other manual effort.

What Are Some Common DPR Values?

Devices come with varying DPRs, each influencing how content is displayed. Here are some common values:

  • 1.0 (Standard Displays): These displays have a 1:1 ratio of physical to logical pixels. Content appears as designed without any scaling, but the level of detail may not be as sharp compared to higher-DPR devices. Found on most non-HD desktop monitors, older laptops, etc.
  • 2.0 (Retina Displays): Popularized by Apple, Retina displays double the number of physical pixels for each logical pixel. This significantly enhances visual clarity, making images and text look crisp and detailed. Such displays are found on Apple Retina displays, flagship smartphones (e.g., iPhone, Samsung Galaxy), etc.
  • 3.0 (High-end Displays): Found on larger iPads with Retina screens, premium 4K phones, or high-end Android devices, these displays push pixel density even further.
  • 4.0 and above (Ultra-high end): Found on specialized screens like professional-grade 8K monitors and VR headsets. Higher DPR values use progressively more physical pixels per logical pixel, enhancing detail and sharpness. 

Importance of using the right DPR for different industries

Adapting to DPR is essential in real-world applications to not only ensure an optimal user experience, but also for perception and branding. For example:

  • Profile Pictures: Clear and professional-looking profile pictures enhance user perception and engagement, crucial for social media platforms like LinkedIn or Instagram.
  • E-commerce Product Images: High-DPR displays allow product images to appear crisp and attractive, showcasing the product's details clearly. This is essential in e-commerce, because high-quality product visuals can and do influence buying decisions.
  • Web Graphics and UI Elements: Elements like logos, icons, and buttons must appear crisp on all devices to maintain a strong, cohesive brand identity and boost user confidence.

Optimizing for DPR is not just for users. It also preemptively avoids issues that affect engagement.

Optimizing for DPR automatically using Client Hints

Developers can also optimize for DPR automatically using Client hints – a set of HTTP request headers that allow the server to receive information about the user's device, including the screen's pixel density. This allows servers (that support it) to serve appropriately sized images automatically without needing extensive client-side markup.

The ImageKit image API supports the latest client hints specification – including Sec-CH-DPR and Sec-CH-Width. You can set the dpr parameter to auto when applying a transform to an existing image URL, and ImageKit will read the dpr value automatically from the Sec-CH-DPR Client Hint request header.

Conclusion

Device Pixel Ratio plays a pivotal role in modern web and app design. By understanding DPR and employing best practices like responsive design and client hints, developers can deliver consistent, high-quality visual experiences across devices.

Tools like ImageKit's Image API streamline image optimization for DPR, and can even automate the same with minimal changes with client hints specification.