Image-set() - Fonction CSS

Schéma syntaxique de image-set().

Description des termes utilisés sur le schéma :

• 'url' est le chemin d'accès à une image. La fonction url() est optionnelle dans cette syntaxe.
• gradient est un dégradé de couleurs, défini par l'une des fonctions de dégradé de CSS : conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().
• res est une résolution : une valeur numérique suivie d'une unité de résolution.
• mime est un type mime, comme image/jpeg.

Description de la fonction image-set().

La fonction image-set() sélectionne une image parmi la liste qui lui est fournie. Ce choix se fait en fonction des possibilités de l'appareil sur lequel est visualisé la page, en particulier la résolution de son écran.
image-set() permet donc de toujours affichée l'image la plus optimisée, en réduisant le transfert d'octets inutiles pour un écran bas de gamme, tout en exploitant au mieux les écrans haut de gamme.

image-set() permet également de sélectionner une image parmi plusieurs en fonction du format : png, jpg, etc.

La fonction image-set() peut être utilisée avec :

• background-image : Image d'arrière-plan.
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• list-style-image : Définit une image à utiliser à la place des puces.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxe de la fonction image-set().

• <propriété>: image-set('chemin/image-1' 1x, 'chemin/image-2' 2x, ...); url1 r1 url2 r2

  La fonction image-set() attend une série d'images, avec une indication de leur résolution optimale. Dans notre exemple :

  • url1, url2, etc. sont les chemins d'accès aux images, absolus ou relatifs. dans ce dernier cas, le chemin est évalué par rapport à l'emplacement de la feuille de styles.
  • r1, r2, etc. sont les indications de résolution optimale pour chacune des images. Cette information peut être exprimée avec plusieurs unités :
    - x = points par pixel (dppx).
    - dpi = points par pouce.
    - dpcm = points par centimètre.
    Pour plus de précisions, reportez-vous à la page sur les unités CSS de résolution.
• <propriété>: image-set('chemin/image-1' type('image/jpeg'), ...); url1 t1

  Dans ce deuxième exemple, le choix de l'image se fera en fonction de son type mime.
  Cette syntaxe est cumulable avec la précédente, permettant de choisir l'image en fonction de son type ET de sa résolution.

Prise en charge par les navigateurs (compatibilité).

1

Ensemble
d'images

2

Fonction
image-set()

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 129

Baidu Browser

Version testée : 13.52

Chrome

Version testée : 129

Chrome pour Androïd

Version testée : 129

Edge

Version testée : 129

Firefox

Version testée : 131

Firefox pour Androïd

Version testée : 130

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 3

Opéra

Version testée : 114

Opéra Mobile

Version testée : 80

QQ Browser

Version testée : 14.9

Safari

Version testée : 18.0

Safari sur IOS

Version testée : 18.0

Samsung Internet

Version testée : 25

UC Browser pour Androïd

Version testée : 15.5

Opéra mini

Version testée : Toutes

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction image-set().

• Module CSS - Images et contenu remplacé

  Introduction de la fonction image-set() dans le niveau 4 de la spécification.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi, concernant le traitement des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction image-set() fait partie du module CSS Images Module qui regroupe tout ce qui concerne le type image.

Propriétés :

Fonctions :