image-set()

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La fonction CSS image-set() est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.

La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction image-set() permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.

Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisatrice ou l'utilisateur payer les conséquences.

Syntaxe

css

image-set() = image-set( <image-set-option># )
où <image-set-option> = [ <image> | <string> ] <resolution> et
      <string> est une <url>

Valeurs

<image>: Une valeur de type <image> qui peut être n'importe quelle image sauf un ensemble d'image. Autrement dit, la fonction image-set() ne peut pas être imbriquée dans une autre fonction image-set().
<string>: Une URL vers une image.
<resolution> Facultatif: Les unités pour une valeur <resolution> incluent x ou dppx, pour les unités en points par pixel, dpi, pour les unités en points par pouce, et dpcm en points par centimètre carré. Chaque image d'un ensemble image-set() doit avoir une résolution unique.
type(<string>) Facultatif: Une chaîne de caractères représentant un type MIME valide, par exemple "image/jpeg".

Exemples

Utiliser `image-set()` pour fournir des images d'arrière-plan alternatives

Dans cet exemple, on montre comment utiliser image-set() afin de fournir deux images possibles pour background-image, le choix étant effectué selon la résolution nécessaire : une version normale et une version haute-résolution.

Note : Dans cet exemple, la version préfixée avec -webkit est également utilisée pour prendre en charge Chrome et Safari. Dans Firefox 90, l'implémentation permet d'avoir -webkit-image-set() comme alias pour image-set() (afin de fournir une compatibilité si la propriété standard n'avait pas été ajoutée à la feuille de style).

Utiliser `image-set()` pour fournir des formats d'image alternatifs

Dans l'exemple qui suit, la fonction type() est utilisée afin de servir une image aux formats AVIF et JPEG. Si le navigateur prend en charge le format AVIF, il choisira cette version, sinon il utilisera la version JPEG.

Fournir un format de secours

Il n'y a pas de méthode de recours native en l'absence de prise en charge de image-set(). Aussi, pour inclure une propriété background-image destinée aux navigateurs qui n'implémentent pas cette fonction, on pourra ajouter une déclaration séparée, avant celle qui utilise image-set().

css

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

Accessibilité

Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous puissent en bénéficier.

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser