imageタグの最適化

拡張子が対応しているブラウザに一番最適な画像を出力する方法。

picture
  source(srcset="image.avif", type="image/avif")
  source(srcset="image.webp", type="image/webp")
  img(src="image.png", alt="灰色の背景")

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.png" alt="" />
</picture>