Lazy Load

To improve the page loading speed, the template uses Lazy Load for images. The script is:

if ('loading' in HTMLImageElement.prototype) {   const images = document.querySelectorAll('img[loading="lazy"]');   images.forEach(img => {      img.src = img.dataset.src;});} else {   // Dynamically import the LazySizes library   const script = document.createElement('script');   script.src =      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';   document.body.appendChild(script);

The markup of the images is as follows:

<picture>   <source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/logo-white.webp">   <img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/logo-white.png" alt="logo"></picture>

where:

<picture> - tag wrapper for the image and its alternative formats
the <source> tag contains in its data attribute “data-srcset” the path to the image in the “webp” format (for those browsers that support this format)
the <img> tag itself contains class = "lazyload" responsible for initializing LazyLoad,
the data attribute loading = "lazy" is used to initialize the standard LazyLoad in browsers that support this functionality,
the "data-src" data attribute contains the path to the image in the format of "png" or "jpg", for browsers that do not support the format of "webp".

It should be noted that in the style files there is possibility of using modern formats as backgrounds, as well as standard formats, for example:

.no-webp .popup-search .modal-content::after {  background-image: url("../img/theme-content/backgrounds/header-footer-gradient-bg.png");}.webp .popup-search .modal-content::after {  background-image: url(../img/theme-content/backgrounds/header-footer-gradient-bg.webp);}

Here:
- “no-webp” and “webp” are the classes that are added to the <html> tag automatically when the page loads, using a js script.
“Webp” - if the used browser supports the “* .webp” image format, or the “no-webp” class if it does not.
Therefore, for some browsers, some styles will be loaded, for others - others, depending on their functionality.