files/fr/web/css/image-set()/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

---
title: image-set()
slug: Web/CSS/image-set()
tags:
  - CSS
  - Fonction
  - Reference
translation_of: Web/CSS/image-set()
---
<p>{{CSSRef}}</p>

<p class="summary">La fonction <code>image-set()</code> 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.</p>

<p>La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction <code>image-set()</code> 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.</p>

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

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
où &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; et où
      &lt;string&gt; est une valeur &lt;url&gt;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<p>La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.</p>

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

<p>La valeur <code><a href="/fr/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> peut utiliser une unité <code>x</code> ou <code>dppx</code> (points par unité de pixel), <code>dpi</code> (points par pouce) ou <code>dpcm</code> (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à <code>image-set()</code>.</p>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: css notranslate">background-image: image-set( "chat.png" 1x,
                             "chat-2x.png" 2x,
                             "chat-print.png" 600dpi);</pre>

<p>Dans cet exemple, on utilise <code>image-set()</code> 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.</p>

<h2 id="Accessibilité">Accessibilité</h2>

<p>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 les utilisateurs puissent en bénéficier.</p>

<ul>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 WCAG 2.0</a></li>
</ul>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spécification</th>
   <th>État</th>
   <th>Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.types.image.image-set")}}</p>

<h2 id="See_also" name="See_also">Voir aussi</h2>

<ul>
 <li>{{cssxref("image")}}</li>
 <li>{{cssxref("_image", "image()")}}</li>
 <li>{{cssxref("element")}}</li>
 <li>{{cssxref("url")}}</li>
 <li>{{cssxref("&lt;gradient&gt;")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>