Instruct browsers to fetch pictures when they are about to appear on the screen.
Pictures files have usually much larger filesizes than hypertext, and a web page with many pictures may take a long time to load. This can be both inconvenient to visitors, and can downgrade the page rating in search engines.
"Lazy loading" is a technique where browsers make a request for a picture only when it is already on the screen or about to scroll into view. Pictures "below the fold" or in collapsed sections are not fetched from the server until they are about to become visible.
src attribute when needed.
Recent browsers support this feature natively with a new HTML5
loading attribute. This recipe makes use on the native feature.
This page has the feature enabled and many pictures at the bottom. Open your Web developer tools (F12) and scroll down slowly to observe the delayed fetch requests.
Add to local/config.php:
## core images $ImgTagFmt= '<img src="$LinkUrl" alt="$LinkAlt" title="$LinkAlt" loading="lazy" />';
If you use Cookbook:Mini, to make thumbnails load when in viewport:
## Lazy Cookbook.Mini thumbnails $Mini['ImgFmt'] = '<img class="mini" src="%1$s" title="%2$s" alt="%2$s" border="0" loading="lazy" />';
If you use Cookbook:ThumbList, to make thumbnails load when in viewport:
## Lazy Cookbook.ThumbList thumbnails $ThumbList['_tmpl']['imgwrap'] = '<img class="thumbs" src="?u" title="%1$s" alt="%1$s" %2$s border="0" loading="lazy" />';
There should be no change to your workflows.
To see which browsers natively support the feature, check https://caniuse.com/loading-lazy-attr.
If you have custom markup or other recipe producing embedded images, you may want to update the HTML format for the
<img/> tag in a similar manner.
To do / some day / maybe
Maybe include a polyfill for old browsers.
Change log / Release notes
- 20220323 Recipe published, ready to be tested.
Recipe written and maintained by Petko.
These are screenshots from Skins:SkinsGallery.