Device Pixel Ratio

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 (opens in a new tab) 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"
/>

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.

Edit in Sandbox

Edit in Sandbox

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