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:
<script src="lazysizes.min.js"></script>
Then change <img> tags from src="myImage.jpg" to data-src="myImage.jpg" and add class="lazyload" like:
<img data-src="myImage.jpg" class="lazyload" />
You can get fancier with responsive image sets and lazy loading CSS background images, too.
