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.
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.
An example of use with lazysizes, which is a script for lazy loading and is optimized for SEO :
... <script src="lazysizes.min.js" async></script> </body>
<img src="images/hors-ecran.jpg" alt="Mon Image hors écran"><img class="lazyload" data-src="images/off-screen.jpg" alt="My Image offscreen">