Search Documentation

dpr 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 master image.

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

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=" 1x,
Value Image Dimensions Image Size
dpr=1 500×300 40.36kB
dpr=2 1000×600 108.86kB
dpr=3 1500×900 206.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.

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