はじめに

皆さまは日頃からブラウザやデバイスの対応状況に応じて最適な画像の設定をしていますか？

AVIF、Webp、レティナ対応...と様々な設定をしていると思います。
中でも<picture>にはお世話になっている人も多いと思います。

ですがこれには問題があります。

`<picture>`の問題点

例えば、<picture>でWebP形式に対応しているブラウザにはWebP画像を、それ以外にはPNGやJPEG画像を表示させるには下記の設定をします。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="画像">
</picture>

当然ながらこれではcssの背景画像や装飾ではこの方法は使用することが出来ません。

cssで実現するにはJavaScriptを使用して上手く切り替えるか、妥協をしてpngをそのまま使用することになってしまいます。

image-set()の登場

そこでCSSのimage-set()を使用することで、この問題を解決できます。以下はその基本的な使い方の例です。

.element {
  background-image: image-set(
    url("image.webp") type("image/webp"),
    url("image.png") type("image/png")
  );
}

このコードは、ブラウザがWebP形式に対応している場合はimage.webpを、それ以外の場合はimage.pngを背景画像として表示します。

解説

url(): 画像のURLを指定します
type(): 各画像のフォーマットを明示します
ブラウザは自動で対応可能な形式を確認し、最適な画像を選択します

画像のtype指定は下記参照ください。
https://developer.mozilla.org/ja/docs/Web/Media/Formats/Image_types

さらに、解像度・画質を考慮した切り替えも可能です。

.element {
  background-image: image-set(
    url("image@1x.png") 1x,
    url("image@2x.png") 2x
  );
}

この例では、デバイスの画面解像度に応じて1xまたは2xの画像が選ばれます。
これにより、AppleデバイスのRetinaディスプレイなどの高解像度デバイスにも最適な画像を提供できます！

注意点

image-set()にはフォールバックが存在しない為、設定した画像全てが読み込めなかった場合に備えてurl()での記載も必要になる場合があります。

.element  {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    url("image.webp") type("image/webp"),
    url("image.png") type("image/png")
  );
}

ブラウザ対応状況

以前は-webkitをつける必要がありましたがiOS17で不要になった事でメジャーなブラウザではそのまま利用することができます。

まとめ

image-set()を使えば、CSSでより柔軟に画像を管理できるようになります。
背景画像や装飾に最適な形式や形式を提供し、パフォーマンスを向上させつつユーザー体験を高めていきましょう！