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
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.
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
|Value||Image Dimensions||Image Size|
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
See the API specification for more information about this parameter's value ranges and format.