<image>
=======

Le type de données CSS **`<image>`** représente une image en deux dimensions.

Syntaxe
-------

Le type de données `<image>` peut être représenté avec l'une des valeurs suivantes :

* Une image portée par une valeur de type `url()`
* Une valeur de type `<gradient>` qui représente un dégradé
* Une partie d'une page web définie par la fonction `element()`
* Une image, un fragment d'image ou une zone de couleur définie par la fonction `image()`
* Une fusion d'une ou plusieurs images à l'aide de la fonction `cross-fade()`.
* Une sélection d'images déterminée selon la résolution à l'aide de la fonction `image-set()`.
Description
-----------

CSS peut gérer ces différents types d'images :

* Les images avec *des dimensions intrinsèques* (c'est-à-dire une taille naturelle), comme celles au format JPEG, PNG, ou dans un autre format matriciel.
* Les images avec *plusieurs dimensions intrinsèques*, qui existent en plusieurs versions à l'intérieur d'un même fichier (comme certains formats .ico), auquel cas les dimensions intrinsèques seront celles de l'image la plus grande de la zone et avec les proportions les plus proches de la boîte englobante.
* Les images sans dimension intrinsèque, mais avec *des proportions intrinsèques* entre la hauteur et la largeur, comme un fichier SVG ou une image dans un format vectoriel.
* Les images *sans dimension ou proportion intrinsèques*, comme les dégradés CSS.

Le moteur CSS détermine la *taille effective* d'un objet en utilisant :

1. Ses dimensions intrinsèques
2. Sa taille indiquée, définie par les propriétés CSS telles que `width`, `height`, ou `background-size`
3. Sa taille par défaut, déterminée en fonction de la propriété avec laquelle l'image est utilisée (voir le tableau qui suit)

| Type d'objet (propriété CSS) | Taille par défaut de l'objet |
| --- | --- |
| `background-image` | La taille de la zone de positionnement de l'arrière-plan de l'élément |
| `list-style-image` | La taille d'un caractère en `1em` |
| `border-image-source` | La taille de la zone de bordure de l'élément |
| `cursor` | La taille définie par le navigateur qui correspond à la taille du curseur du système client |
| `mask-image` | ? |
| `shape-outside` | ? |
| `mask-border-source` | ? |
| `symbols()` pour `@counter-style` | Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client |
| `content` pour un pseudo-élément (`::after`/`::before`) | Un rectangle de 300px par 150px |

La taille effective d'un objet est calculée avec l'algorithme suivant :

1. Si la taille indiquée définit *la largeur et la hauteur*, ces valeurs sont utilisées pour la taille effective de l'objet.
2. Si la taille indiquée définit *uniquement la largeur ou la hauteur*, la valeur manquante est déterminée à l'aide des proportions intrinsèques si elles existent, de la dimension intrinsèque correspondante si la valeur correspond ou de la taille par défaut de l'objet pour la valeur manquante.
3. Si la taille indiquée ne définit *ni la largeur, ni la hauteur*, la taille effective de l'objet est calculée afin de respecter les proportions intrinsèques de l'image sans dépasser la taille par défaut de l'objet sur aucun des deux axes. Si l'image n'a pas de proportions intrinsèques, ce sont celles de l'objet auquel elle s'applique qui sont utilisées et si l'objet n'en a pas non plus, la largeur ou la hauteur manquante est déterminée à partir de la taille par défaut de l'objet.

**Note :** Tous les navigateurs ne prennent pas en charge tous les types d'image pour chaque propriété. Voir le tableau de compatibilité pour plus de détails.

Accessibilité
-------------

Les navigateurs ne fournissent pas d'informations particulières quant aux images d'arrière-plan pour les outils d'assistance. Cela est notamment important pour les lecteurs d'écran qui n'annonceront pas leur présence et ne véhiculeront pas d'informations à leur propos aux personnes. Si l'image contient des informations critiques pour la compréhension générale de la page, il faudra avoir une description sémantique dans le document.

* Comprendre les règles WCAG, explications de la règle 1.1
* Comprendre le critère de réussite 1.1.1, dans le guide de compréhension des WCAG 2.0 du W3C (en anglais)
Syntaxe formelle
----------------
```

<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### Images valides


```css
url(test.jpg)               /\* Une valeur <url>, qui fonctionne bien si test.jpg est une image existante. \*/
linear-gradient(blue, red)  /\* Un dégradé (type <gradient>). \*/
element(#idexistant)        /\* Une partie d'une page web, référencée grâce à la fonction element(), qui
 fonctionne bien si "idexistant" est un identifiant existant sur la page. \*/
image(ltr 'fleche.png#xywh=0,0,16,16', red)
                            /\* Une section 16x16 d'une image commençant dans le coin supérieur gauche
 de l'image originale arrow.png si celle-ci est prise en charge ou sinon
 un damier rouge. Si la langue s'écrit de droit à gauche, l'image est
 renversée horizontalement. \*/
cross-fade(20% url(vingt.png), url(quatrevingt.png))
                            /\* Des images fusionnées, la première ayant une opacité à 20% et la seconde
 une opacité de 80%. \*/
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /\* Une sélection d'image avec des résolutions différentes. \*/
```

### Images invalides


```css
pasdurl.jpg         /\* Un fichier d'image doit être défini à l'aide de la fonction url(). \*/
url(rapport.pdf)    /\* Le fichier visé par la fonction url() doit être une image. \*/
element(#idfaux)    /\* L'identifiant d'un élément doit correspondre à un identifiant existant. \*/
image(z.jpg#xy=0,0) /\* Le fragment spatial doit être écrit selon le format xywh=#,#,#,#. \*/
image-set('chat.jpg' 1x, 'chien.jpg' 1x) /\* Chaque image d'un ensemble doit avoir une résolution différente. \*/
```

Spécifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le type `<gradient>`
* `element()`
* `image()`
* `image-set()`
* `cross-fade()`.