Cloudinary & responsive images. No one size fits all
Update(2020-12-08): Check out this implementation using Cloudinary, Netlify, and 11ty.
I have been using cloudinary for a number of years. I store all my website images there and they are fetched as needed. Today I will explain why I use them for serving responsive images on my website.
The following information is on their website. I will paraphrase what I’ve done/learned. Here is the goal as stated on their site, “Our best option is to generate images based on the screen size and render them.” Seems simple enough.
data-src attribute instead of the normal
src in your image section. The attribute
cld-responsive lets Cloudinary know which image to make responsive.
Initialize the instance to change all the images marked with
cld-responsive into responsive images.
Sample responsive image.
Viewed on an iPhone the image is 400 x 524 at 38 KB
Viewed on an iPad the image is 1100 x 1440 at 211 KB