kdcsライブラリー

画像をコンテンツ内で使っているか（imgタグ）、背景画像として使っているか（cssで指定）によって分かれる

背景画像の場合はcssの「image-set()」で対応

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

※Safari 12 以前や Chrome 67 以前などの古い WebKit 系ブラウザでは -webkit-image-set() が必要。
　（Safari 12 や Chrome 67 は 2018年リリースで約7年前のブラウザ）

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* 古いsafariとChromeのブラウザ用（WebP優先） */
  background-image: -webkit-image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

コンテンツ内の画像の場合は「picture」タグで対応

<picture>
  <source srcset="../images/slide_mv/sp01.webp" type="image/webp">
  <img src="../images/slide_mv/sp01.jpg" alt="スライド画像">
</picture>