There is a library called Responsively Lazy I’ve released in 2015 that got quite popular.
Since then a lot has changed. The browsers got the <picture> tag, srcset is now widely supported, and the loading attribute was introduced. But still, I think Responsively Lazy is the best way to go when you want to lazy load responsive images and other content.
Version 3.0, released today, builds on the foundation (the idea from 2015) and provides a lot more possibilities.
Let’s check it out.
Since then a lot has changed. The browsers got the <picture> tag, srcset is now widely supported, and the loading attribute was introduced. But still, I think Responsively Lazy is the best way to go when you want to lazy load responsive images and other content.
Version 3.0, released today, builds on the foundation (the idea from 2015) and provides a lot more possibilities.
Let’s check it out.
What’s not changed
Responsively Lazy still provides the same SEO-friendly way to lazy load images. You can see it in Google Images. All websites at Alle.bg and Bear CMS benefit from this. And still, it’s truly lazy. There are absolutely no unnecessary requests.
What’s new
There is a new API. Now you must use the data-responsively-lazy attributes instead of a class name.
Here is an example that contains all the new features.
Here is an example that contains all the new features.
<img
src="images/2500.jpg"
style="width:100%;aspect-ratio:400/274;"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-responsively-lazy="images/400.avif 400w avif, images/400.webp 400w webp, images/400.jpg 400w, ..."
data-responsively-lazy-threshold="500px" // optional
data-on-responsively-lazy-load="..." // optional
/>
<div
data-responsively-lazy-type="background"
data-responsively-lazy="images/400.avif 400w avif, images/400.webp 400w webp, images/400.jpg 400w, ..."
></div>
<div
data-responsively-lazy-type="html"
data-responsively-lazy="hello world"
></div>As you can see, there is now support for AVIF and you can specify the order the image versions are checked.
You can also lazy load background images.
You can customize the load threshold.
Take a look at the code and give it a try.
You can also lazy load background images.
You can customize the load threshold.
All good stuff.
Take a look at the code and give it a try.