Offscreen image

What is an offscreen image ?

An offscreen image is simply an image that is not visible to the user when the page loads. It is located below the waterline or is not visible without user interaction.

Why is it useful to delay their loading ?

It is useful to defer their loading after all the essential resources the page have loaded in order to reduce the delay before interactivity and thus improve the user experience.

How can I do this ?

There is no specific HTML attribute to inform the browser that these images are to be uploaded later. To delay their loading it is therefore necessary to use JavaScript code that will take care of loading the image at the appropriate time.

An example of use with lazysizes, which is a script for lazy loading and is optimized for SEO :

• download and include the lazysizes script

    ...
    <script src="lazysizes.min.js" async></script>
</body>

• add the "lazyload" class and change the "src" attribute to "data-src" (useful for scripting) on images whose loading must be delayed

<img src="images/hors-ecran.jpg" alt="Mon Image hors écran">
<img class="lazyload" data-src="images/off-screen.jpg" alt="My Image offscreen">

• the image will be loaded after the essential resources of the page