Question:How to lazy loading images in HTML?
<img loading="lazy" src="https://via.placeholder.com/320x200" alt="Lazy loaded image" />
loading attribute of the
img element indicates how the browser should load the image.
lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.
eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value)
Reference:The loading attribute reference
Share "How to lazy loading images in HTML?"