webpとloading=”lazy”を併用する

「当たり前だろ」って思われるかもしれませんが。。。

こういう風に書けばwebpとloading=”lazy”は併用できます。

WebPの画像の方もちゃんと遅延読み込みしてくれます。

<picture>
  <source type="image/webp" srcset="test.webp">
  <img src="test.jpg" loading="lazy">
</picture>