La fonction 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 de l'utilisateur. 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'utilisateur payer les conséquences.

Syntaxe

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

Valeurs

La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction url.

On notera qu'on ne peut pas imbriquer un appel à une fonction image-set() au sein d'un autre appel à image-set().

La valeur <resolution> peut utiliser une unité x ou ddpx (points par unité de pixel), dpi (points par pouce) ou dpcm (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à image-set().

Exemples

background-image: image-set( "chat.png" 1x,
                             "chat-2x.png" 2x);

Dans cet exemple, on utilise image-set() afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.

Accessibilité

Les outils d'assistance ne peuvent pas analyser les images. Si l'image contient des informations essentielles à la compréhension de la page, il faudra inclure une description sémantique dans le document.

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'The image-set() notation' dans cette spécification.
Version de travail  

Compatibilité des navigateurs

No compatibility data found. Please contribute data for "css.types.image.image-set" (depth: 1) to the MDN compatibility data repository.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,