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:
- Setting DPR value with resize, extend or blur transformations: Use the DPR setting when applying any of these transformations.
- Using the DPR query parameter in the CDN URL: Use the
dpr=valueto set DPR dynamically. - Automating DPR with Client Hints: Delivers responsive images based on the user's device.
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 = 1 | dpr = 2 | dpr = 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.