Dale Stubbart

Fast Website Loading: Images

Lazy Loading of Images - The Easy Way

You want to speed up your website because a) you don&';t want people to just give up on it ever loading. You want them to have a good experience on your website and to come back and visit often. Ideally you want them to buy something or purchase a service offering. And that won&';t happen if you website loads too slowly. b) you want your website to save energy. It keeps the internet less expensive (or ultimately it can do that). It saves the planet.

There are several ways to do that. That is one of my consulting offerings that I hope people pay me for. If you&';d like guidance contact me. You can also buy my book &n-; Designing Your Website to Use Less Energy.

Today, let&';s talk about loading images faster. I just learned a new neat trick. But let&';s talk about the basics first.
If you own the image and have it on your website you'll want to compress it and size it correctly. There are tools on the internet that will resize or compress an image for you. If you have image editing software, you can resize and compress the image there. Backup the picture first. Now, change the picture to be the size that you're going to display it at. If you&';re going to display it at 2 or 3 different sizes, choose something in the middle or create multiple copies. Save those. Next, change the resolution, dots per inch, dpi, pixels per inch or whatever it's called to 72. That&';s usually fine for any picture on the web. If it&';s too blurry now, try 96 or some slightly higher number (you may need to go back to the original picture or to the saved copy to get the resolution to work correctly. Those are the best two things you can do to get your image/picture to load faster.
The next thing you can do is lazy loading or later loading. That is, the image is loaded after everything else. If the user has to scroll to see the object, and they never scroll that far, the image will never be loaded. That will save energy and total loading time. But if it&';s the first thing they see or if they scroll that far, the image will still load faster. That means the total load time for your page is still lower and that saves energy.
There are several ways to do this. The simplest is to just add loading="lazy" to the image tag:
<img src="https://mypicture.jpg" ... loading="lazy">
That&';s it. The space where the image will be loaded will be blank for a few seconds while the image is loading. If that isn&';t working for you, place your image tag inside a div tag.
<div style="background-image:url(http://blurred_image.jpg">
<img ...>
</div>
You might want a blurred image &n-; Pixabay probably has a free one if you don&';t. You&';ll want one that&';s a good color match for the background of the picture. The image can be plain, one color, and not blurred. You can use a regular image and add the blur filter:
filter:blur(10%)

Notes of caution: loading="lazy" has just become available in major browsers this year. That means people using older versions of browsers will still end up with the image loading slowly. I don&';t know about you, but my computer insists that I stay up to date. Yes, there are people using older browsers. I don&';t think it&';s that big a deal.
filter:blur is not available in earlier versions of Internet Edge and Internet Explorer. If people are on those earlier versions, the background image won&';t be blurred. Again, most people are on current versions. And, even if they aren&';t, it&';s not a big deal.

I used loading="lazy" on a slow loading image today. I was amazed at the speed increase. I think you will be too.