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>

値

<image>

<image> は画像セット以外のあらゆる画像を指定できます。 image-set() 関数は他の image-set() 関数の中に入れ子にすることはできません。

<string>

画像への url() です。

<resolution>省略可

<resolution> の単位には、 x や dppx (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 image-set() 内の画像すべて、解像度が固有でなければなりません。

type(<string>)省略可

有効な MIME タイプの文字列、例えば "image/jpeg" です。

例

image-set() を使用して代替の background-image オプションの提供

この例は image-set() を使用して 2 つの代替 background-image オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。

メモ: 上記の例では、 -webkit の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) -webkit-image-set() を image-set() の別名として使用する対応が追加されました。

image-set() を使用して別な画像形式を提供

次の例では type() 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。

代替画像の提供

image-set() には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 image-set() を使用する行の前に別の宣言が必要です。

.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
}

アクセシビリティの考慮

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

仕様書

Specification
CSS Images Module Level 4
# image-set-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報