Many users will never scroll all the way down to see the awesome images below the fold on your web site. If you load all your images when the page loads, you are wasting bandwidth and slowing down the page start-up experience.
Instead, you can lazy-load images as they are about to come into view. The latest way to do this is using Intersectional Observer, but it isn’t supported on Safari, iOS Safari, or IE11.
I opted to use lazysizes to deal with cross-browser differences, viewport size differences, scroll speeds, and the other headaches you could get rolling your own solution. To see it in action, go to their test page, open your browser tools Network tab, filter for Images, and scroll down. You’ll see new images loaded as you get closer to them. It’s slick.
The easiest way to use lazysizes is to reference the script in your page:
<img> tags from
data-src="myImage.jpg" and add
<img data-src="myImage.jpg" class="lazyload" />
About Volare Systems
We build high quality web and mobile web apps that run fast and look great on every device . We are based in Denver, Colorado . Let us know if we can help your company with custom software development or web application development.
We hope this blog post was helpful . If so, please share it using the social toolbar on this page so others can find it. Thank you .