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,
                             "chat-print.png" 600dpi);

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
image-set()
Expérimentale
Chrome Support complet 21
Préfixée
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Support complet 4.4
Préfixée
Support complet 4.4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1107646.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support partiel 6
Préfixée Notes
Support partiel 6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Support complet 4.0
Préfixée
Support complet 4.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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