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)
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.
Hi, is it possible to tell Cloudinary to only increase the size / resolution if the image is physically capable of it?
For example, let's say I have a 1000px wide image; when asked for `w_1000,dpr_2.0`, Cloudinary will return a 2000px wide image. Is there a parameter that would give me just that 1000px version if that's the largest we have?
This is a good scenario where it's unnecessary to upscale the original image as it will not improve the quality of the image and will also increase the size of the image.
In order to avoid transformed image larger than the original image, you can set crop to limit. You can read more about it in our documentation.
Hope this helps but let me know if you have further question.
Fantastic, thank you!
Please sign in to leave a comment.