はじめに
最近のWebは、デバイスの高解像度化や AVIFやWebPなどのモダン画像形式の普及により、「同じ画像でも、環境に合わせて最適なものを出し分けたい」というニーズが増えてきました。
特に、CSS で背景画像や UI 装飾の画像を扱う場合、HTML の <picture> のように柔軟に切り替えられず、悩んだことがある人も多いと思います。
そこで便利なのが image-set() です。
image-set() を使うと、解像度やフォーマットに応じて複数画像をCSS側だけで指定でき、ブラウザが最適な画像を自動で選んでくれます。
そのため、記事では、image-set() の基本構文から、使える場面、注意点、実際の使い方をまとめて紹介しようと思います。
image-set() とは？
image-set() は、複数の画像候補から、ブラウザが最適なものを自動で選んでくれるCSSの関数です。
解像度（1x/2x）や画像フォーマット（AVIF / WebP / PNG）をまとめて指定できるため、背景画像やUI装飾の最適化に役立ちます。
使い方
基本的な使い方は、以下のようになります。
.sample {
background-image: image-set(
url("image.png") 1x,
url("image@2x.png") 2x
);
}
また、フォーマットを使いたい場合は、以下のように書きます。
.sample {
background-image: image-set(
url("image.avif") type("image/avif"),
url("image.webp") type("image/webp"),
url("image.png") type("image/png")
);
}
注意点
image-set()を使う時には、いくつか注意した方が良いことがあります。
- image-set()は、CSSの背景画像として扱われるため、HTMLの
<img loading="lazy">のような遅延読み込みの仕組みは適用されない - アクセシビリティに注意は必要
- CSS の画像（背景画像）は alt テキストを持てず、スクリーンリーダーに読み上げられない
- そのため、ページを理解するのに不可欠な画像などは、使わないようにする
実際の使い方
1x / 2x の高解像度対応
高解像度画像を用意している場合、image-set() を使うと CSS 側だけで簡単に切り替えできます。
以下のように指定することで、ブラウザは画面の解像度に応じて、1x か 2x の画像を自動で選択します。
.sample {
background-image: image-set(
url("image.png") 1x,
url("image@2x.png") 2x
);
}
フォーマット優先度の設定
AVIF や WebP など、ブラウザごとにサポート状況が異なる画像形式を優先度つきで並べることもできます。
以下のように指定することで、avif → webp → pngの順にフォールバックします。
.sample {
background-image: image-set(
url("image.avif") type("image/avif"),
url("image.webp") type("image/webp"),
url("image.png") type("image/png")
);
}
まとめ
image-set() を使うと、解像度やフォーマットに応じて複数の画像を CSS だけで指定でき、背景画像や装飾画像の最適化がとても簡単になります。
一方で、以下の点には注意が必要です。
- 遅延読み込み（lazyload）は効かない
- CSS では alt を持てず、スクリーンリーダーに読み上げられない
- 意味のある画像には使わず、あくまで 装飾用途 にとどめるべき
image-set() は強力な機能ですが、用途を誤るとアクセシビリティや性能に影響が出ることもあります。
背景画像や UI 装飾といった「純粋な装飾」の範囲で、
適切に使い分けながら活用していきましょう。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。