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).
http://res.cloudinary.com/demo/image/upload/w_0.5/sample.jpg

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:
https://github.com/cloudinary/cloudinary_gem/issues/78#issuecomment-38040400

Have more questions? Submit a request

Comments

  • 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: https://www.youtube.com/watch?v=LWoxbmt3M5c

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

Powered by Zendesk