How to use Cloudinary with responsive websites?

We generally advise that you upload your hi-res images to Cloudinary and then request a low-res transformation for lower resolution displays.
For example, setting the width parameter to 0.5, (w_0.5 in URLs) will take an existing retina resolution image and deliver it at non-retina resolution (half the x & y dimensions).

Notice that you don't have to limit yourself to 2 resolutions (retina + non-retina). You can ask Cloudinary to do on the fly resizing based on the specific device's resolution and get an optimized image for the vast array of different device resolutions out there. Other ideas - if you can determine the user's current bandwidth rate, you can even ask Cloudinary to use lower quality JPGs for low bandwidth users, etc.

For more information:

Have more questions? Submit a request


  • Avatar
    GopalaKrishna Palem

    Here is a brief demo video I have created for anyone want to use cloudinary plugin for scaling their images on the fly with responsive pages:

    GK (Gopalakrishna Palem)
    Management & Strategy Consultant - Big Data, IOT

Powered by Zendesk