Cloudinary responsive images

Comments

1 comment

  • Avatar
    Aditi Madan

    Hi Ricardo,

    Passing only w_auto in the URL will not adjust the width but it needs to be done in combination with the javascript.
    The best way is to let our JS library take care of the "conversion" from w_auto to the right value.

    Therefore, the w_auto URL should be inside the data-src attribute. Also, the cld-responsive must be also defined for each image.
    For example:

    <img data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/smiling_man.jpg" class="cld-responsive">
    

    Note that in this example, there's no src value at all.
    Then with a few lines of code, our JS library will be instructed to go over all of these images, will calculate the corresponding breakpoint, then assign the src attribute with the correct value (e.g., w_1500 instead of w_auto).
    For example:

    var my_breakpoints = [500,1000,1500];
    var cl = cloudinary.Cloudinary.new({cloud_name: "<your cloud name>"}); 
    cl.config({breakpoints:my_breakpoints, responsive_use_breakpoints:true})
    cl.responsive();
    

    This will restrict the breakpoint assignment to only 500, 1000, and 1500. So for your question, yes, only three derivatives will be created.

    You can see this in action in the following link:
    https://jsfiddle.net/taragano/qa62k59L/

    For more information:
    https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript

    If you continue seeing the issue then please share the website link where this can be tested further. 
    Regards,

    Aditi

    0
    Comment actions Permalink

Please sign in to leave a comment.