title: Lazy loading images with accessibility and printer support
body: <p>I am looking for a proper way to implement lazy loading of images without harming printability and accessibility, and without introducing layout shift (content jump), preferrably using native <code>loading=lazy</code> and a fallback for older browsers. Answers to the question <a href="https://stackoverflow.com/questions/9667631/how-lazy-loading-images-using-javascript-works">How lazy loading images using JavaScript works?
  </a> included various solutions none of which completely satisfy all of these requirements.</p>
  <p>An elegant solution should be based on valid and complete html markup, i.e. using <code>&lt;img src</code>, <code>srcset</code>, <code>sizes</code>, <code>width</code>, <code>height</code>, and <code>loading</code> attributes instead of putting the data into <code>data-</code> attributes, like the popular javascript libraries <a href="https://github.com/aFarkas/lazysizes" rel="nofollow noreferrer">lazysizes</a> and <a href="https://github.com/verlok/vanilla-lazyload" rel="nofollow noreferrer">vanilla-lazyload</a> do. There should be no need to use <code>&lt;noscript&gt;</code> elements either.</p>
  <p>Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=875403" rel="nofollow noreferrer">bug in chrome</a>, the first browser to support native lazyloading, images that have not yet been loaded will be missing in the printed page.</p>
  <p>Both javascript libraries mentioned above, require either invalid markup without any <code>src</code> attribute at all, or an empty or low quality placeholder (LQIP), while the <code>src</code> data is put into <code>data-src</code> instead, and <code>srcset</code> data put into <code>data-srcset</code>, all of which only works with javascript. Is this considered an acceptable or even best practice in 2020, and does this neither harm the site accessibility, cross-device compatibility, nor search engine optimization?</p>
  <p>Update:</p>
  <p>I tried a workaround for the printing bug using only HTML and CSS <code>@media print</code> background images <a href="https://codepen.io/ingosteinke/pen/dyXaPqo" rel="nofollow noreferrer">in this codepen</a> . Even if this worked as intended, there would be a necessary css directive for each and every image, which is neither elegant nor generic. Unfortunately there is no way to use media queries inside the <code>&lt;picture&gt;</code> element either.</p>
  <p>There is another workaround by Houssein Djirdeh at at <a href="https://lazy-load-with-print-ctl1l4wu1.now.sh" rel="nofollow noreferrer">lazy-load-with-print-ctl1l4wu1.now.sh</a> using javascript to change <code>loading=lazy</code> to <code>loading=eager</code> when a &quot;print&quot; button is clicked. The same function could also be used <a href="https://caniuse.com/?search=onbeforeprint" rel="nofollow noreferrer">onbeforeprint</a>.</p>
  <p>I made a <a href="https://codepen.io/ingosteinke/pen/zYKdvGv" rel="nofollow noreferrer">codepen using lazysizes</a>.</p>
  <p>I made another <a href="https://codepen.io/ingosteinke/pen/GRjvppQ" rel="nofollow noreferrer">codepen using vanilla-lazyload</a> .</p>
  <p>I thought about forking a javascript solution to make it work using <code>src</code> and <code>srcset</code>, but this must probably have been tried before, the tradeoff would be that once the lazyloading script starts to act on the image elements, the browser might have already started downloading the source files.</p>