Cloudinary & responsive images. No one size fits all

by Paul Applegate

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.

Step 1
Insert a link to Cloudinary’s javascript into your HTML file. This is the magic that figures out the screen size of the device and sends the correct image to them, using the correct dimensions and format and size of the image. So an image that is 1400x2400 on a desktop won’t be sent to an iPhone. The iPhone will get the 120x340 image. If the browser supports it, they will also get a webP image. See this chart to see if your browser supports WebP(the newish image format on the block).
Step 2
Add the data-src attribute instead of the normal src in your image section. The attribute cld-responsive lets Cloudinary know which image to make responsive.
Step 3
Initialize the instance to change all the images marked with cld-responsive into responsive images.
That’s it. Now you have a site with responsive images. The only downside is the user needs to have javascript enabled. I don’t think this is a big problem because most have it enabled.
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

Game Show Contract