Generate responsive images

[colbyfayock]

Cloudinary supports generating responsive images.

https://cloudinary.com/documentation/responsive_images#responsive_breakpoint_generator

cloudinary.uploader.v2.upload("sample.jpg", { responsive_breakpoints: { create_derived: true, bytes_step: 20000, min_width: 200, max_width: 1000, transformation: { crop: 'fill', aspect_ratio: '16:9', gravity: 'auto' } } }, function(error, result) { console.log(result); });

The sizes used should be configurable in the Netlify file-based configuration. Ideally we could also target configuration, for instance, using element selectors to use specific sizes for that specific element(s).

For example: All images get sizes="..." while .my-images get sizes="..."

More Info

• https://cloudinary.com/blog/introducing_intelligent_responsive_image_breakpoints_solutions
• https://www.responsivebreakpoints.com/

[colbyfayock]

sounds great @Ambareen09!

When using the Cloudinary uploader, we're able to automatically generate responsive images that we can use to improve how images load

That code snippet in the original post is an example of that:

cloudinary.uploader.v2.upload("sample.jpg", {
  responsive_breakpoints: {
    create_derived: true,
    bytes_step: 20000,
    min_width: 200,
    max_width: 1000,
    transformation: {
      crop: 'fill',
      aspect_ratio: '16:9',
      gravity: 'auto'
    }
  }
})

In the response, the breakpoints would be included

here's another simpler example from the docs:

To upload an image from a remote url: https://www.example.com/sample.jpg and request Cloudinary to find the best breakpoints based on the following guidelines: a minimum width of 200 pixels, a maximum width of 1000 pixels, at least 20000 bytes file size difference between the breakpoints, while keeping the generated derived images:

cloudinary.v2.uploader
.upload("https://www.example.com/sample.jpg",
  { responsive_breakpoints: 
    { create_derived: true, 
      bytes_step: 20000, 
      min_width: 200, 
      max_width: 1000 }})
.then(result=>console.log(result));

Under https://cloudinary.com/documentation/image_upload_api_reference#upload_examples

Once we have these breakpoints, we can use them in the code such as:

<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
castle_c_scale,w_200.jpg 200w,
castle_c_scale,w_476.jpg 476w,
castle_c_scale,w_665.jpg 665w,
castle_c_scale,w_816.jpg 816w,
castle_c_scale,w_962.jpg 962w,
castle_c_scale,w_1094.jpg 1094w,
castle_c_scale,w_1215.jpg 1215w,
castle_c_scale,w_1294.jpg 1294w,
castle_c_scale,w_1381.jpg 1381w,
castle_c_scale,w_1400.jpg 1400w"
src="castle_c_scale,w_1400.jpg"
alt="">

we likely need to recognize inputs to turn this on and off. see my comment here for how to do this:

#23 (comment)

in an example where someone has an image:

<img src="myimage.jpg" />

we would want the end result to be something along the lines of

<img src="myimage.jpg" sizes="..." srcset="https://res.cloudinary.com/.../myimage.jpg..." />

[colbyfayock]

i also encourage you to write a test for your work to help debug and to make sure it's working as expected

[BajajAyush]

Hi! Is it okay if I work on this issue? @Ambareen09 are you still working on it? Thank you!

[colbyfayock]

It's only been 4 days, we need to wait to hear back from them but if they're not going to work on it it's yours. I'll give them until Tuesday to respond.

[colbyfayock]

Thanks for letting us know

[colbyfayock]

hey @BajajAyush are you still working on this?

[developer-diganta]

Hey @colbyfayock if @BajajAyush is not working on this issue, I'd like to give it a try!

[colbyfayock]

@developer-diganta we'll give them until tomorrow to respond, but if they don't you can take it!

[colbyfayock]

@developer-diganta are you still interested in this? if so its yours

[developer-diganta]

Yes! Gonna start working on it!