どうも、くまだです。
CSSのimage-set()を使って背景画像を出しわけ。
image-set
画像を出しわけるといえば、pictureタグがあります。
例えば、以下のようにWebP形式対応ブラウザではWebPの画像が表示され、それ以外のブラウザではWebp形式ではない画像が表示される、という感じです。
<div class="image">
<picture>
<source srcset="dummy.webp" type="image/webp">
<img src="dummy.png" />
</picture>
</div>
このやり方はimgタグでは対応できますが、背景画像backgroudで対応したい場合もあります。
その場合は、以下のようにimage-set()を使えばpictureタグと同様のことができます。表示させる画像には画像形式のtype(フォーマット)を指定します。
.image {
background-image: image-set(
url(sample.webp) type("image/webp"),
url(sample.png) type("image/png")
);
}
こちらの場合も、WebP対応ブラウザではWebP画像が表示され、それ以外のブラウザではWebP画像ではないほうが表示されます。
image-setで設定した画像がすべて読み込まれなくなったとき用に、background-image: url(~~)を指定しておくのもいいと思います。
.image {
background-image: url(dummy.png); /* 以下の画像がすべて読み込まれなかったとき用*/
background-image: image-set(
url(sample.webp) type("image/webp"),
url(sample.png) type("image/png")
);
}
ここまで読んでくださりありがとうございました。