How does using DPR differ from setting multiplied dimension values?

Cloudinary uses the DPR parameter to properly support Retina and HiDPI devices.

While DPR serves as a multiplying factor for the output image dimensions, it also impacts other transformation settings in order to achieve optimal output image. 

Take a blurring effect for example - since a DPR 2.0 image is eventually 'scaled down' by the browser, a stronger blurring effect should be applied in DPR 2.0 situation in order to achieve the same visual effect.

In overlays, to take another case, and specifically text overlays, in order for font size to look the same in DPR 1.0 and DPR 2.0, larger font should be used for the latter.

The principle is that when Cloudinary gets the DPR parameter it examines which of the transformation parameters needs to be tuned to achieve the right results, and adjusts them.

Here's a short demonstration using the blur effect:

https://res.cloudinary.com/demo/image/upload/w_400,e_blur:300/sample.jpg (DPR 1.0)

https://res.cloudinary.com/demo/image/upload/w_200,e_blur:300,dpr_2.0/sample.jpg

While the first image is to be used on devices with DPR 1.0 and displayed in it's physical size, the second is designated to be used on DPR 2.0 devices where it will be shrinked from 400 physical pixels to 200 logical ones. In both cases the on-screen result will be identical.

 

Have more questions? Submit a request

Comments

Powered by Zendesk