image-set()

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

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

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

構文

image-set() = image-set( <image-set-option># ) 
where <image-set-option> = [ <image> | <string> ] <resolution> and
      <string> is an <url>

もっともよく見かけるのは url() または <string> 値ですが、 <image> は画像セット以外のあらゆる画像型を取ることができます。 image-set() 関数は他の image-set() 関数の中に入れることはできません。

<resolution> の単位には、ピクセル当たりのドット数を表す x または dppx、インチ当たりのドット数を表す dpi、センチメートル当たりのドット数を表す dpcm があります。 image-set() の中の画像はすべて、固有の解像度が必要です。

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);

この例は image-set() の使い方を示しており、 background-image のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。

アクセシビリティの考慮事項

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

仕様書

仕様書 状態 備考
CSS Images Module Level 4
The image-set() notation の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
image-set()Chrome 完全対応 21
接頭辞付き
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 79
接頭辞付き
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1107646.
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 部分対応 6
接頭辞付き 補足
部分対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android 完全対応 4.4
接頭辞付き
完全対応 4.4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 25
接頭辞付き
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1107646.
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 部分対応 6
接頭辞付き 補足
部分対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android 完全対応 1.5
接頭辞付き
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報