image-set() で背景画像を解像度ごとに切り替える

どんな時に使う？

ヒーローやカードの背景に WebP などを使うとき、Retina 向けの 2x 画像を CSS だけで出し分けたい場合。これまでメディアクエリ（min-resolution）や複数クラスで分岐していた処理を、1つの宣言にまとめられる。

コード／手順

image-set() に解像度付きの候補を並べる。ブラウザがディスプレイのピクセル密度に合わせて適切な URL を選ぶ。

.hero {
  background-image: image-set(
    url("hero.webp") 1x,
    url("[email protected]") 2x
  );
  background-size: cover;
  background-position: center;
}

• 1x / 2x は解像度記述子。type("image/webp") のように形式を添えてフォールバック候補を並べることもできる。
• <img> の srcset と同じ発想だが、対象は CSS の背景（や content など画像を取るプロパティ）。
• 古い書き方の -webkit-image-set() が必要な環境はほぼ残っていないが、レガシー対応が必要なら併記する。

注意点・対応状況

• 主要ブラウザでサポート済み（2026-10 時点）。未対応環境では背景が空になるため、通常の url() を先に書いてから image-set() で上書きする段階的強化が安全。
• ファイルサイズと表示サイズのバランスは srcset と同様に設計する。2x を常に配信するとモバイルの転送量が無駄に増えることがある。
• アートディレクション（狭い画面では別構図）には向かない。幅に応じた差し替えは引き続きメディアクエリや image() の組み合わせを検討する。

出典

• @aviralj02 · 2026-10-13