Avoid loading images that aren’t visible


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

  1. Consider adding an attribute loading="lazy" to defer loading an image that is not visible at the time the page has loaded.
  2. When possible, we recommend adding width and height to avoid shifting layout.
  3. 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.


Rule ID: invisible-image-loaded

Best Practice, Performance, SiteLint