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

ChromeならAVIFで表示されるはずだが…

.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;
}

元記事を表示する