既存のWebサイトを簡単にWebPの画像に対応するサンプル

imgタグでWebP

<picture>
  <source srcset="bnr.webp" type="image/webp">
  <source srcset="bnr.jpg" type="image/jpeg">
  <img src="bnr.jpg" width="200" height="50" alt="">
</picture>

CSSでWebP

.bnr {
  width: 200px;
  height: 50px;
  background-image: url(bnr.webp);
}
.no-webp .bnr {
  background-image: url(bnr.jpg);
}

元記事を表示する