<img src="/images/sample_01.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_02.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_03.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_04.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_05.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_06.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_07.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_08.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_09.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" data-src="/images/sample_10.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     data-src="/images/large/sample_11.jpg" 
     data-srcset="/images/small/sample_11.jpg 640w, 
                  /images/medium/sample_11.jpg 960w, 
                  /images/large/sample_11.jpg 1200w" 
     sizes="100vw"
     alt=""> 
<picture>
  <source media="(min-width: 1200px)" data-srcset="/images/large/sample_12.jpg">
  <img loading="lazy" class="lazyload" data-src="/images/sample_12.jpg" alt="">
</picture> 

if ('loading' in HTMLImageElement.prototype) {
  //loading 属性がサポートされている場合
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    //img 要素の src 属性の値に data-src 属性の値を設定
    img.src = img.dataset.src;
  });
  //img 要素で srcset 属性を使っている場合
  const img_srcset = document.querySelectorAll("img[data-srcset]");
  img_srcset.forEach(img_srcset => {
    //img 要素の srcset 属性の値に data-srcset 属性の値を設定
    img_srcset.srcset = img_srcset.dataset.srcset;
  });
  
  //picture 要素
  const sources = document.querySelectorAll("source[data-srcset]");
  sources.forEach(source => {
    //source 要素の srcset 属性の値に data-srcset 属性の値を設定
    source.srcset = source.dataset.srcset;
  });
} else {
  //loading 属性がサポートされていない場合
  // 動的に lazysizes ライブラリーを読み込む
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js';
  //script.src = 'path/to/lazysizes.min.js';  //ダウンロードしてある場合
  document.body.appendChild(script);
}