Description
This rule determines if the image is being loaded, but is not visible at the time the page has loaded. This helps to optimize the loading of the page by postponing loading the image until it’s expected to be needed, rather than immediately during the initial page load.
Examples of suggested code for this rule:
<img loading="lazy" src="example.png" width="100" height="200" alt="An alternative description of the image"/>How to fix it
- Consider adding an attribute
loading="lazy"to defer loading an image that is not visible at the time the page has loaded. - When possible, we recommend to add
widthandheightto avoid shifting layout. - Additionally, to speed up loading some images, e.g. banner on top of the page, you may want to use the attribute
fetchpriority(high,low,auto) that gives a hint to the browser on how it should prioritize the fetch of the image relative to other images. With this attribute, the browser should make an effort to respect the developer’s preference for the priority of a resource when fetching it.
Known Limitations
Experimental. Expect behavior to change in the future.