1. Home
  2. Docs
  3. SiteLint
  4. Performance Rules
  5. invisible-image-loaded

invisible-image-loaded

Print this article

    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.

    Additionally, when possible, we recommend to add width and height to avoid shifting layout.

    Known Limitations

    Experimental. Expect behavior to change in the future.

    Was this article helpful to you? Yes No