JSFiddle - React, Tailwind, and code Playground

by mfranzke

HTML

<script src="loading-attribute-polyfill"></script>
<header>
  <!-- Regular images with loading="lazy" attribute provided for testing -->
  <noscript class="loading-lazy">
    <img
         src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22"
         loading="lazy"
         alt=".."
         width="250"
         height="150"
         />
  </noscript>

  <img src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22eager%22" loading="eager" alt=".." width="250" height="150" />

  <img src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22auto%22" loading="auto" alt=".." width="250" height="150" />

  <picture>
    <source media="(min-width: 40em)" srcset="
                    https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+1x_br_loading%3D%22lazy%22 1x,
                    https://imgplaceholder.com/500x500/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+2x_br_loading%3D%22lazy%22 2x
                    " />
    <source srcset="
                    https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_1x_br_loading%3D%22lazy%22 1x,
                    https://imgplaceholder.com/500x500/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_2x_br_loading%3D%22lazy%22 2x
                    " />
    <noscript class="loading-lazy">
      <img
           src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_img+src_br_loading%3D%22lazy%22"
           loading="lazy"
           alt=".."
           width="250"
           height="150"
           />
    </noscript>
  </picture>

  <noscript class="loading-lazy">
    <img
         src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22"
      ...

CSS

/* Defing the header to be two screen sizes height at minimum to ensure that the images within the main section are being loaded lazy */

body > header {
  min-height: 200vh;
}

body > header img,
body > header iframe,
body > main img,
body > main iframe {
  margin: 1rem;
}