Skip to main content

Device Pixel Ratio

Your assets are probably viewed by users on HiDPI or Retina displays that support different Device Pixel Ratio (or DPR) values than a standard display.

A higher DPR uses more pixels resulting in a smoother, more detailed image. Since different devices use different DPR values the image should be responsive to provide users with an optimal viewing experience irrespective of their device. PixelBin helps you deliver responsive images in the following ways:


When setting a DPR value, you must also include a resize, extend or blur transformation specifying a certain width or height.

Setting DPR value with resize, extend or blur transformations

Set the DPR value of the asset when you use Resize an Image, Extend an Image and Blur transformations. PixelBin accepts the following values such as 0.75, 1, 1.3, 1.5, 2, 3, etc.

Setting the Dpr value to 1 (default), 2, or 3 generates the following images while resizing them with a width of 400px to match the required DPR.

dpr = 1dpr = 2dpr = 3

Using the DPR query parameter in the CDN URL

You can also make use of DPR in the CDN URL to control the density of the image. The following video takes you through the process of specifying the DPR value.

Automating DPR with Client Hints

Client Hints send the information about the required size of an image in the user's device. Set the client hint by updating the HTTP headers with the following meta tag:

<meta http-equiv="Accept-CH" content="DPR, Width" />

This allows the browser to send the DPR value and device screen width along with image requests.

Use dpr=auto query parameter in the CDN URL to read the values from the client hint and automatically deliver optimal image depending on the requesting device's DPR.

Transform and enhance your images using our powerful AI technology. Organize your images in more efficient manner and our extensible APIs enables seamless integration with your system unleashing the power of our platform. Join the large community of users who use PixelBin to transform their image libraries and achieve excellent performance

Is this page useful?