CSS image-set()でWebPやAVIFをtype()で出し分けはできない

image-set()とは

image-set()とtype()を使用すればCSSでimgタグのpicture(source)のように指定されたセットから最も適切なCSS画像をブラウザーで表示できるとMDNには書かれている。

MDN image-set()
MDNにはこのように書かれている

picture(source)を知らない人向けに説明するとpictureタグの中にsourceタグとimgタグを以下のように設定すれば最も適切な画像をブラウザで表示できる。

例えばavif, webp, jpgで分けるなら以下のようになる。

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

picture(source)を使用して出し分けるサンプル

Can I use... で確認したところimage-set()を使用する場合は2021年12月現在はほとんどのブラウザでベンダープレフィックスが必要なので注意。

CSS image-setでWebPやAVIFをimgのpictureのように出し分け

image-set()でファイル形式は出し分け不可

image-set()の仕様ではファイル形式の出し分けを使用するにはurlのうしろにtype()を指定して以下のようにする。

.sample {
  width: 300px;
  height: 200px;
  background-image: -webkit-image-set(
    url("sample.avif") type("image/avif"),
    url("sample.webp") type("image/webp"),
    url("sample.jpg") type("image/jpeg")
  );
  background-image: image-set(
    url("sample.avif") type("image/avif"),
    url("sample.webp") type("image/webp"),
    url("sample.jpg") type("image/jpeg")
  );
  background-size: cover;
}

しかし、上記の通りCSSを書いても背景画像は表示されない。

どうやらimage-set()のtype()は現在使用できないようだ。

2021年12月現在、MDNとCan I use... にはChromeでtype()は使用不可とは記載されていないのでimage-set()を使用する際には注意が必要です。

https://developer.mozilla.org/ja/docs/Web/CSS/image/image-set()

https://caniuse.com/css-image-set

image-set()でtype()を使用して出し分けるサンプル

カテゴリーcss