Add support for lazysizes.js

[boxedpaul]

Feature request for Cloudinary Ruby SDK

Please add a 'switch' for enabling lazysizes loading. This requires the tag to use the "data-src" attribute instead of the "src" attribute on the image.

Use case

I have a site with a lot of images that Google doesn't like (from an SEO perspective) because I'm loading all the images on initial page render despite optimising with Cloudinary to reduce file size.

Lazy loading images means you load them only when the user scrolls the page such that the image is visible. This can save significantly on download time when rendering the page. This is important for SEO.

Lazysizes.js is a very popular script for doing this, but it relies on swapping the "src" attribute for "data-src".

Do you have a proposed solution?

In the cl_image_tag helper, provide an option to swap the "src" attribute for "data-src". E.g.

link_to cl_image_tag(resource.image, lazysizes: true)

Result:

<img data-src="/resource_image.jpg" class="lazyload">

You could make this more extensible by making this configurable:

link_to cl_image_tag(resource.image, src: 'data-src')

Thanks.

[boxedpaul]

Okay...so as soon as I posted this I realised I could do the following:

link_to cl_image_tag(resource.image).gsub(' src="', ' data-src="').html_safe

Works like a charm, and maybe worth mentioning for anyone else that gets stuck.