Confused about using Cloudinary js solution for automating responsive images
I am using the cloudinary javascript solution for automating my responsive images.
In my web page, I have included the cloudinary-core-shrinkwrap.js file and have called the cloudinary method with my cloud name. I have set the width parameters to w_auto and crop parameters to c_scale for each image; each image also has a class of cld-responsive applied. Like this:
<img data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/smiling_man.jpg"
class="cld-responsive">
If I want each image to use automatic format selection, and auto quality selection, should I specify that in the url as well? Should each url look like this?
<img data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale,f_auto,q_auto/smiling_man.jpg"
class="cld-responsive">
-
Hi Jackie,
Yes, the URLs, apart from c_scale,w_auto should also have any other transformations you would like to use, such as f_auto, q_auto, dpr_auto or any other image transformation.
Below I've also included a sample JSFiddle that shows how the w_ value will be derived depending on how the <img/> and its parent element are defined and what widths they're given in different scenarios.
https://jsfiddle.net/aleksandar_cloudinary/859nvqcp/0
Post is closed for comments.
Comments
1 comment