<img src="/images/sample_01.jpg" width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_02.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_03.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_04.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_05.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_06.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_07.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_08.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_09.jpg" 
     width="960" height="593" alt=""> 
<img loading="lazy" class="lazyload" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     data-src="/images/sample_10.jpg" 
     width="960" height="593" alt=""> 
 
<img loading="lazy" class="lazyload" 
 src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
 data-src="/images/large/sample_11.jpg" 
 srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 640w"
 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)" 
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="/images/large/sample_12.jpg">
    <img loading="lazy" 
      class="lazyload"
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
      data-src="/images/sample_12.jpg"
      alt="">
  </picture>  

if ('loading' in HTMLImageElement.prototype) {
  //loading 属性がサポートされている場合
  //loading 属性に lazy が指定されている img 要素
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    //img 要素の src 属性の値に data-src 属性の値を設定
    img.src = img.dataset.src;
  });
  //img 要素で srcset 属性を使っている場合（data-srcset が指定されている img 要素）
  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);
}