How to get srcset for responsive images from Cloudinary breakpoint generator?

[katerlouis]

trafficstars

$cloudinary.image.url('example/myImage') returns a single url, but how can I get the srcset string?

[mayashavin]

@katerlouis there is an open issue for that #62 . At the moment you need to write your own srcset generator based on the $cloudinary.image.url(). It hasn't been supported yet unfortunately.

[katerlouis]

Are you sure about that? Here it says cloudinary API can create breakpoints programmatically. I mean: what good are the generated breakpoints when I don't get the result of what breakpoints the algorithm chose?

And in their transformation docs is explained how to use breakpoint generation just like in the generator responsivebreakpoints.com.

return this.$cloudinary.image.url('example/myImage', {
    crop: 'scale',
    width: 'auto:breakpoints_200_1920_30_15',
});

this code just returns another url: https://res.cloudinary.com/my-account/image/upload/c_scale,f_auto,q_auto,w_auto:breakpoints_200_1920_30_15/myImage-some-hash

[mayashavin]

@katerlouis I'm sure.

You can use $cloudinary.upload() to upload and generate breakpoints programatically, but $cloudinary.image.url() is simply for generating the image url, not the whole element tag with srcset support. The return code is correct, according to the official documentation:

What I understand from you is to generate the set of urls for srcset attribute, which is not supported. Creating breakpoints dynamically based on client-hints headers is always supported.

To be clear, if you wish to achieve something like this:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

in which srcset attribute value is generated by Cloudinary url builder - then no, we don't support that.

According to the documentation, the only thing it supports when you use breakpoints settings is the img src will be similar to https://res.cloudinary.com/my-account/image/upload/c_scale,f_auto,q_auto,w_auto:breakpoints_200_1920_30_15/myImage-some-hash and the actual image served from Cloudinary will be according to the client breakpoint hint received from the request header. And this only applies to Node SDK, not client-side SDK.

[katerlouis]

Okay, even with client hints I get only one image back. What if the browser resizes? The image won't get requested again and is now probably the wrong size.

I'm really surprised and kinda disappointed that the generator returns the calculated breakpoints, but the entire Cloudinary concept and API does not.

just to be super clear: I don't care about the sizes attribute; in my opinion thats my job to decide. I don't even need a perfectly formatted, ready to go srcset string necessarily. If only I could atleast get back the decision cloudinary made, I could then build my own srcset with this information.

How about this: on upload coming from Wordpress or heck maybe our own node application, we create the breakpoints programatically using the cloudinary.upload mentioned at the bottom of the (generator page)[https://www.responsivebreakpoints.com/]: Then the images would already have been created on the Cloudinary server, right? There must be a way to access these images now, right? I mean, why else would I create them upon upload, if there's no way to access them?

[Baroshem]

Hey, I am closing this issue as it is targeting the v1 version and it is really old (more than one year stale)