JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, reprehenderit?</p>

<picture class="">
  <source
          data-sizes="auto"
          data-srcset="
          https://picsum.photos/640/160.webp 640w,
          https://picsum.photos/1024/256.webp 1024w,
          https://picsum.photos/1440/360.webp 1440w,
          https://picsum.photos/1920/480.webp 1920w"
          type="image/webp"
          />
  <img
       src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="480" width="1920"></svg>'
       class="lazyload "
       data-sizes="auto"
       data-srcset="
       https://picsum.photos/640/160 640w,
       https://picsum.photos/1024/256 1024w,
       https://picsum.photos/1440/360 1440w,
       https://picsum.photos/1920/480 1920w"
       alt="The relevant alt text here"
       />
</picture>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, voluptatum!</p>

<script src="https://cdn.rawgit.com/aFarkas/lazysizes/master/plugins/respimg/ls.respimg.js"></script>
<script src="https://rawgit.com/aFarkas/lazysizes/master/plugins/bgset/ls.bgset.js"></script>
<script src="https://cdn.rawgit.com/aFarkas/lazysizes/master/lazysizes.js"></script>

CSS

img {
  width: 100%;
}

picture {
  border: 1px solid;
  display: block;
  width: 100%;
}