Image upscaling and downscaling

When you resize images, the quality of the result depends on whether you're scaling up or down, and which method you use. This page covers how to upscale images with super resolution, how to preserve quality when downscaling, and how to use the device pixel ratio (DPR) parameter to deliver images at the right resolution for different devices.

Upscaling with super resolution

Normally, when you upscale a small image, the image loses detail and quality. Take, for example, this 200 x 303 pixel image of a hall:

If you upscale it to four times its dimensions using c_scale,w_4.0, this is the result:

Using the generative AI upscale effect, you can retain much more detail for the same scaling factor:

The upscale effect scales each dimension by four, multiplying the total number of pixels by 16, and uses AI-based prediction to fill in the details.

You can chain other transformations after the upscale, for example, creating a square image of the ceiling using the fill cropping mode, and switching it to grayscale:

See full syntax: e_upscale in the Transformation Reference.

Try it out: Upscale.

Downscaling tips

When downscaling images, you may notice a reduction in image quality. Here are several approaches to help preserve more details.

Option 1: Use the sharpen effect

The sharpen effect adds definition to your images and can be used with any plan.

To sharpen a downscaled image:

1. Apply your resize transformation (e.g., c_scale,w_300).
2. Add the sharpen effect (e_sharpen in URLs).

This approach counts as one transformation.

Option 2: Use generative restore

The generative restore effect uses AI to enhance image quality and comes with any plan, but incurs a higher transformation count.

To use generative restore on a downscaled image:

1. Apply your resize transformation (e.g., c_scale,w_300).
2. Add the generative restore effect (e_gen_restore in URLs).

Option 3: Use premium downscaling (Enterprise plans)

Our premium downscaling algorithm is available for select Enterprise plans and preserves more details by default, particularly at very low resolutions (less than 0.4 megapixels). It's great for small thumbnails, such as those used in product galleries.

To use premium downscaling:

Premium downscaling is applied automatically to any transformation that causes an image to be downscaled. You don't need to add any extra transformation parameters.

To enable premium downscaling for your account, contact your Customer Success Manager or our sales team.

Device Pixel Ratio (DPR)

Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying an image, resulting in a clearer, sharper image.

Use the dpr parameter to set the DPR value of the delivered image. The parameter accepts a numeric value specifying the DPR multiplier.

To deliver images at the correct resolution for different device pixel ratios:

1. Set a crop or resize mode and specify the dimensions in logical pixels (e.g., c_fill,h_100,w_100).
2. Set the dpr parameter to match the target device's pixel ratio:
   • dpr_1.0 for standard displays
   • dpr_2.0 for high-resolution displays (e.g., Retina)
   • dpr_3.0 for ultra-high-resolution displays

For example, the following URL dynamically generates a square (100x100) version of an image named pepper, and adds another image named sale_icon as a semi-transparent watermark to the bottom right with a width of 50% relative to the pepper image. Setting the dpr value to 1.0, 2.0 (as in the code example) or 3.0 generates the following images at the corresponding physical pixel dimensions.

Now you can create a 100x100 HTML image tag and deliver an image with the resolution that best matches the specified pixel density of your users' devices. The three images below are all displayed within a 100x100 logical square using the <img> tag width and height attributes, while you see more details and a better visual result for the last two images if you view this documentation using a device that supports a higher DPR.

You can alternatively use dpr_auto to automatically deliver the best image based on the requesting device's DPR. For details, see the Responsive images documentation.

How DPR affects transformations

The dpr parameter is more than a shortcut for multiplying the requested width or height. Cloudinary treats the specified dimensions as the intended logical display size and uses the DPR value to generate the required physical pixel dimensions. Some transformation settings are also adjusted relative to the DPR so that the displayed result remains visually consistent across devices.

For example, when applying a blur effect, a DPR 2.0 image is delivered with twice the physical pixels and is then displayed at the intended logical size by the browser. Using dpr enables Cloudinary to apply the transformation in a way that preserves the perceived blur strength after display scaling.

The following image is intended for DPR 1.0 display, delivered at 400 pixels wide:

The equivalent URL for DPR 2.0 delivers the same image at 200 physical pixels — half the width — so that it displays at the same 200 logical pixel size on a high-density screen:

The same principle applies to other transformations: text and image overlays are sized relative to the logical dimensions, and visual effects are scaled so the result looks the same regardless of DPR.

See full syntax: dpr (DPR) in the Transformation Reference.