I recently noticed a neat feature in Chrome that allows us to lazy-load images. In version 76 and later, this feature should be enabled by default.
The purpose oc lazy loading is to defer the loading of images on a page until they appear on a users screen, saving bandwidth for both the user and the server.
To test out lazy loading, simply include the loading attribute on your img elements to loading="lazy".
On an image in HTML, this would look like this:
<img src="some-image-file.webp" alt="lazy loading example" loading="lazy" height="200px" width="200px">
Note. Including a width and a height attribute prevents the content from re-flowing once the image start to load.
Possible values are as follows:
- auto – Default (same as not including the attribute.)
- lazy – Images will only load when they appear on the screen.
- eager – Images will be loaded as fast as possible.
It should also work on iframe elements, but you may of course want to avoid using frames, as they are rarely the right solution. Consider using AJAX or server-sided code instead of iframes.
It should also be noted that lazy-loading works best on mobile devices, many desktop users find the behavior disturbing to their browsing experience.
There are still no plans to add this feature to FireFox, and it also does not seem like Safari supports it, so you will need to use a polyfill.
Toggle Lazy Loading in Chrome
You can check if the feature is enabled here: chrome://flags/#enable-lazy-image-loading
Defers the loading of images marked with the attribute 'loading=lazy' until the page is scrolled down near them. – Mac, Windows, Linux, Chrome OS, Android