[Edit]

HTML - image lazy loading

1 contributors

2 contributions

0 discussions

3 points

Created by:

Wayne

475

In this article, we would like to show you how to set image lazy loading using HTML.

Quick solution:

xxxxxxxxxx
 
<img src="/path/to/image.jpg" loading="lazy">

Practical example

Edit

In this example, we use the loading attribute set to lazy to set lazy loading for images and delay their loading on the web page. This can significantly reduce the time it takes for the page to load for the first time and become fully interactive.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" loading="lazy" />
  <br>
  <img src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" loading="lazy" />
  <br>
  <img src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" loading="lazy" />
  <br>
  <img src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" loading="lazy" />
</body>
</html>