Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

image-set()

image-set() は CSS の関数記法で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

解像度や帯域幅は、端末やネットワークのアクセスによって異なります。image-set() 関数は、ユーザーの端末に最も適した解像度の画像を提供します。画像の選択肢の集合を提供し、それぞれに解像度宣言を関連付けて、そこからブラウザーが端末や設定に最も適したものを選び出します。解像度はファイルサイズのプロキシーとして使用することができます。高解像度の画面を持っていても、遅いモバイル接続のユーザーエージェントは、高解像度の画像を読み込むのを待つよりも、低解像度の画像を受信することを好むかもしれません。

image-set() は、それぞれのユーザーが必要なことを判断するのではなく、選択肢を提供することができます。

レスポンシブ画像解像度対応

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.background-image.image-set`	113	113	89	17	113	17
CSS プロパティ
`image-set` image-set() は CSS の関数記法で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。	113	113	89	17	113	17
CSS タイプ
`image-set` image-set() は CSS の関数記法で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。	113	113	89	17	113	17

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.hero {
  background-image: image-set(
    url('bg-1x.jpg') 1x,
    url('bg-2x.jpg') 2x
  );
}

ライブデモ

1x standardresolution

CSS 1x standardresolution demo.

プレビュー全画面表示

2x highresolution

CSS 2x highresolution demo.

プレビュー全画面表示

fo-matpriority

CSS fo-matpriority demo.

プレビュー全画面表示

実務での使いどころ

高DPIディスプレイ向け背景画像の最適化

Retinaディスプレイには2x画像を、通常のディスプレイには1x画像を自動提供し、帯域幅を節約しながら高品質な表示を実現します。

注意点

Baseline低の機能であり、古いブラウザでは-webkit-image-setプレフィックスが必要な場合があります。

対応ブラウザ

基本構文

ライブデモ

1x standardresolution

2x highresolution

fo-matpriority

実務での使いどころ

高DPIディスプレイ向け背景画像の最適化

注意点

アクセシビリティ

参考リンク