imgix APIsRendering APIDevice Pixel Ratio

Device Pixel Ratio

dpr

Controls the output density of your image, so you can serve images at the correct density for every user’s device from a single image.

You must specify a width, a height, or both for this parameter to work. The default is 1 and the maximum value is 5.

Device pixel ratio (DPR) is an easy way to convert between device-independent pixels and device pixels (also called “CSS pixels”), so that high-DPR images are only delivered to devices that can support them. This makes images faster and saves bandwidth for users with lower-DPR devices, while delivering the expected crispness of high-DPR imagery to those devices.

The dpr parameter is best used with techniques such as srcset, so that you can define when you want high-DPR images to be served and at what ratios. For example, the code below will serve the following image sizes to a 500Ă—300-pixel container, based on the specified value of dpr:

<img
  srcset="
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=1 1x,
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=2 2x,
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=3 3x
  "
  src="https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance"
/>
ValueImage DimensionsImage Size
dpr=1500Ă—30040.36kB
dpr=21000Ă—600108.86kB
dpr=31500Ă—900206.56kB

For this image on a low-DPR device, setting dpr=1 saves 60KB over dpr=2, resulting in a much faster load speed for that device. At the same time, setting dpr=2 for high-DPR devices ensures that the image is as sharp as possible for those screens. You can see the difference below.

dpr=0.75 (Android Low DPI)
sandbox-demo
dpr=2 (Retina Display)
sandbox-demo

For more information on using dpr , see our srcset tutorial.