Révision 388821 sur <img>

  • Raccourci de la révision : HTML/Element/Img
  • Titre de la révision : <img>
  • ID de la révision : 388821
  • Créé :
  • Créateur : Goofy
  • Version actuelle ? Non
  • Commentaire tiny typos fixed

Contenu de la révision

Résumé

L'élément <img> HTML (ou HTML Image Element en anglais) représente une image du document.

Note à l'utilisateur :
Les navigateurs n'affichent pas toujours l'image référencée par l'élément. C'est notamment le cas pour les navigateurs non-graphiques (regroupant par exemple ceux utilisés par les personnes souffrant d'une déficience visuelle), ou si l'utilisateur choisit de ne pas afficher les images, ou si le navigateur ne peut afficher l'image parce qu'elle est invalide ou que son format n'est pas supporté. Dans ces situations, le navigateur peut remplacer l'image par le texte défini dans l'attribut alt de l'élément.

  • Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré, contenu tangible. Si l'élément a un attribut {{htmlattrxref("usemap", "img")}}  il fait aussi partie de la catégorie de contenu interactif.
  • Contenu autorisé Aucun, cet élément est vide.
  • Omission de balise Doit posséder une balise initiale, ne doit pas avoir de balise finale.
  • Éléments parent autorisés Tout élément acceptant du contenu intégré.
  • Interface DOM {{domxref("HTMLImageElement")}}

Attributs

Cet élément inclue les attributs globaux.

{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
L'alignement de l'image au regard du contexte environnant.
{{htmlattrdef("alt")}}
Cet attribut définit le texte alternatif décrivant l'image. Les utilisateurs verront ce texte affiché si l'URL de l'image est incorrecte, si l'image n'est pas dans un format supporté ou jusqu'à ce que l'image soit téléchargée.

Note d'utilisation : Omettre cet attribut signifie que l'image est une partie importante du contenu mais qu'aucun équivalent textuel n'est disponible. Faire prendre la valeur d'une chaîne de caractères vide à cet attribut indique que l'image n'est pas une partie importante du contenu. Les navigateurs non-visuels pourraient omettre cette information lors du rendu de la page.

{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
La largeur de la bordure d'une image.
{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}
Cet attribut listé indique si la requête de l'image doit être effectuée en utilisant le CORS ou non. Les images avec CORS activé peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont :
 
anonymous
Une requête d'origines multiples (cross-origin) est effectuée (c'est à dire avec l'en-tête HTTP Origin). Toutefois aucune information d'authentification n'est envoyée (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP avec la valeur Access-Control-Allow-Origin:), l'image sera corrompue et son utilisation restreinte.
use-credentials
Une requête d'origines multiples (avec l'en-tête HTTP Origin:) est effectué et des informations d'authentification sont envoyées (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP Access-Control-Allow-Credentials:, l'image sera corrompue et son utilisation restreinte.
Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP Origin:), afin d'éviter un usage non-corrompu dans des éléments {{HTMLElement('canvas')}}. Si cet attribut est invalide, il est pris en compte comme si le mot-clé anonymous avait été utilisé. Voir la page attributs de réglage du CORS pour plus d'informations.
{{htmlattrdef("height")}}
La hauteur de l'image en pixels CSS {{HTMLVersionInline(5)}} ou en pixels {{HTMLVersionInline(4)}} ou en pourcentages.
{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
Le nombre de pixels de blanc à insérer à droite et à gauche de l'image.
{{htmlattrdef("ismap")}}
Cet attribut booléen indique que l'image fait partie d'une carte (image map) côté serveur. Dans ce cas, les coordonnés précises d'un clic sont envoyées au serveur.

Note d'utilisation : Cet attribut n'est autorisé que dans un élément <img> descendant d'un élément {{htmlelement("a")}} possédant un attribut {{htmlattrxref("href","a")}} valide.

{{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only
L'URL de la description de l'image à afficher, elle complète le texte alt. En {{HTMLVersionInline(5)}}, il faut utiliser un élément  {{HTMLElement("a")}} classique pour lier la description.
{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
Un nom pour l'élément, il est supporté par {{HTMLVersionInline(4)}} à des seules fins de rétro-compatibilité. Il faut utiliser l'attribut id à la place.
{{htmlattrdef("src")}}
L'URL de l'image, cet attribut est obligatoire pour l'élément <img>.
{{htmlattrdef("width")}}
La largeur de l'image en pixels ou en pourcentage.
{{htmlattrdef("usemap")}}
L'URL partielle (commençant par un '#') d'un élément map associé avec l'élément.

Note d'utilisation : Vous ne pouvez utiliser cet attribut si'l'élément <img> est un descendant d'un élément {{htmlelement("a")}} ou d'un élément {{HTMLElement("button")}}.

{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
Le nombre de pixels de blanc à ajouter au-dessus et en-dessous de l'image.

Formats d'image supportés

Le standard HTML ne fournit pas une liste des formats d'image qui doivent être supportés, c'est pourquoi chaque agent supporte une ensemble de formats différent. Le moteur de rendu Gecko supporte les formats suivants :

  • JPEG
  • GIF, y compris les GIFs animés
  • PNG
  • APNG {{gecko_minversion_inline("1.9.2")}}
  • SVG {{gecko_minversion_inline("2.0")}}
  • BMP
  • BMP ICO
  • PNG ICO {{gecko_minversion_inline("9.0")}}

Note :
Le support pour le format XBM a été retiré dans Gecko 1.9.2.

Interaction avec le CSS

Au niveau du CSS un élément <img> est un élément remplacé. Il n'a pas de ligne de base, ce qui veut dire que quand il est utilisé dans un environnement au format texte (inline) : {{cssxref("vertical-align")}}: baseline, le bas de l'image sera affiché au niveau de la ligne de base du conteneur.

Selon son type, une image peut avoir, mais pas nécessairement, une dimension intrinsèque. Une image vectorielle (SVG) n'a pas de dimension intrinsèque alors qu'une image matricielle en a une.

Exemples

<img src="image.jpg" alt="Une superbe image" />

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '<img>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-img-element.html#the-img-element', '<img>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'objects.html#h-13.2', '<img>')}} {{Spec2('HTML4.01')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

Voir aussi

  • Les éléments {{HTMLElement("object")}} et {{HTMLElement("embed")}}

Source de la révision

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'<strong>élément</strong> <strong><code>&lt;img&gt;</code> </strong><strong>HTML </strong>(ou <em>HTML Image Element</em> en anglais) représente une image du document.</p>
<div class="note">
  <p><strong>Note à l'utilisateur : </strong><br />
    Les navigateurs n'affichent pas toujours l'image référencée par l'élément. C'est notamment le cas pour les navigateurs non-graphiques (regroupant par exemple ceux utilisés par les personnes souffrant d'une déficience visuelle), ou si l'utilisateur choisit de ne pas afficher les images, ou si le navigateur ne peut afficher l'image parce qu'elle est invalide ou que <a href="#Formats d'image supportés" title="#Formats d'image supportés">son format n'est pas supporté</a>. Dans ces situations, le navigateur peut remplacer l'image par le texte défini dans l'attribut <strong>alt</strong> de l'élément.</p>
</div>
<ul class="htmlelt">
  <li><dfn><a href="/fr/docs/HTML/Catégorie_de_contenu" title="fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu&nbsp;</a></dfn><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, contenu tangible. Si l'élément a un attribut {{htmlattrxref("usemap", "img")}}&nbsp; il fait aussi partie de la catégorie de <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>.</li>
  <li><dfn>Contenu autorisé </dfn> Aucun, cet élément est vide.</li>
  <li><dfn>Omission de balise </dfn> Doit posséder une balise initiale, ne doit pas avoir de balise finale.</li>
  <li><dfn>Éléments parent autorisés </dfn> Tout élément acceptant du contenu intégré.</li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLImageElement")}}</li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p><span style="line-height: 21px;">Cet élément inclue les </span><a href="/fr/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Attributs_globaux">attributs globaux</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
  <dd>
    L'alignement de l'image au regard du contexte environnant.</dd>
  <dt>
    {{htmlattrdef("alt")}}</dt>
  <dd>
    Cet attribut définit le texte alternatif décrivant l'image. Les utilisateurs verront ce texte affiché si l'URL de l'image est incorrecte, si l'image n'est pas dans un <a href="#Formats d'image supportés" title="#Formats d'image supportés">format supporté</a> ou jusqu'à ce que l'image soit téléchargée.<br />
    <div class="note">
      <p><strong>Note d'utilisation : </strong>Omettre cet attribut signifie que l'image est une partie importante du contenu mais qu'aucun équivalent textuel n'est disponible. Faire prendre la valeur d'une chaîne de caractères vide à cet attribut indique que l'image n'est pas une partie importante du contenu. Les navigateurs non-visuels pourraient omettre cette information lors du rendu de la page.</p>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
  <dd>
    La largeur de la bordure d'une image.</dd>
  <dt>
    {{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
  <dd>
    Cet attribut listé indique si la requête de l'image doit être effectuée en utilisant le CORS ou non. Les <a href="/fr/docs/HTML/Image_avec_ressources_origines_multiples_CORS_activees" title="fr/docs/HTML/Image_avec_ressources_origines_multiples_CORS_activees">images avec CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont :</dd>
  <dd>
    &nbsp;
    <dl>
      <dt>
        anonymous</dt>
      <dd>
        Une requête d'origines multiples (<em>cross-origin</em>) est effectuée (c'est à dire avec l'en-tête HTTP <code>Origin</code>). Toutefois aucune information d'authentification n'est envoyée (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP avec la valeur <code>Access-Control-Allow-Origin:</code>), l'image sera corrompue et son utilisation restreinte.</dd>
      <dt>
        use-credentials</dt>
      <dd>
        Une requête d'origines multiples (avec l'en-tête HTTP <code>Origin:</code>) est effectué et des informations d'authentification sont envoyées (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP<code> Access-Control-Allow-Credentials:</code>, l'image sera corrompue et son utilisation restreinte.</dd>
    </dl>
    Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP <code>Origin:</code>), afin d'éviter un usage non-corrompu dans des éléments {{HTMLElement('canvas')}}. Si cet attribut est invalide, il est pris en compte comme si le mot-clé <strong>anonymous</strong> avait été utilisé. Voir la page <a href="/fr/docs/HTML/Reglages_des_attributs_CORS" title="Attributs_de_réglage_du_CORS">attributs de réglage du CORS</a> pour plus d'informations.</dd>
  <dt>
    {{htmlattrdef("height")}}</dt>
  <dd>
    La hauteur de l'image en pixels CSS {{HTMLVersionInline(5)}} ou en pixels {{HTMLVersionInline(4)}} ou en pourcentages.</dd>
  <dt>
    {{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
  <dd>
    Le nombre de pixels de blanc à insérer à droite et à gauche de l'image.</dd>
  <dt>
    {{htmlattrdef("ismap")}}</dt>
  <dd>
    Cet attribut booléen indique que l'image fait partie d'une carte (<em>image map</em>) côté serveur<em>.</em> Dans ce cas, les coordonnés précises d'un clic sont envoyées au serveur.
    <div class="note">
      <p><strong>Note d'utilisation :</strong> Cet attribut n'est autorisé que dans un élément <code>&lt;img&gt;</code> descendant d'un élément {{htmlelement("a")}} possédant un attribut {{htmlattrxref("href","a")}} valide.</p>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only</dt>
  <dd>
    L'URL de la description de l'image à afficher, elle complète le texte <strong>alt</strong>. En {{HTMLVersionInline(5)}}, il faut utiliser un élément&nbsp; {{HTMLElement("a")}} classique pour lier la description.</dd>
  <dt>
    {{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
  <dd>
    Un nom pour l'élément, il est supporté par {{HTMLVersionInline(4)}} à des seules fins de rétro-compatibilité. Il faut utiliser l'attribut <strong>id</strong> à la place.</dd>
  <dt>
    {{htmlattrdef("src")}}</dt>
  <dd>
    L'URL de l'image, cet attribut est obligatoire pour l'élément <code>&lt;img&gt;</code>.</dd>
  <dt>
    {{htmlattrdef("width")}}</dt>
  <dd>
    La largeur de l'image en pixels ou en pourcentage.</dd>
  <dt>
    {{htmlattrdef("usemap")}}</dt>
  <dd>
    L'URL partielle (commençant par un '#') d'un élément <a href="/fr/docs/HTML/Element/map" title="HTML/Element/Map">map</a> associé avec l'élément.<br />
    <div class="note">
      <p><strong>Note d'utilisation : </strong>Vous ne pouvez utiliser cet attribut si'l'élément <code>&lt;img&gt;</code> est un descendant d'un élément {{htmlelement("a")}} ou d'un élément {{HTMLElement("button")}}.</p>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
  <dd>
    Le nombre de pixels de blanc à ajouter au-dessus et en-dessous de l'image.</dd>
</dl>
<h2 id="Formats_d'image_support.C3.A9s"><a name="Formats d'image supportés">Formats d'image supportés</a></h2>
<p>Le standard HTML ne fournit pas une liste des formats d'image qui doivent être supportés, c'est pourquoi chaque agent supporte une ensemble de formats différent. Le moteur de rendu Gecko supporte les formats suivants :</p>
<ul>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/JPEG" title="http://fr.wikipedia.org/wiki/JPEG">JPEG</a></li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/Graphics_Interchange_Format" title="http://fr.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, y compris les GIFs animés</li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/Portable_Network_Graphics" title="http://fr.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
  <li><a href="/fr/docs/Images_PNG_animées" title="Images PNG animées">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li>
  <li><a href="/fr/docs/SVG" title="SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/Windows_bitmap" title="http://fr.wikipedia.org/wiki/Windows_bitmap">BMP</a></li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/ICO_%28format_de_fichier%29" title="http://fr.wikipedia.org/wiki/ICO_%28format_de_fichier%29">BMP ICO</a></li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/ICO_%28format_de_fichier%29" title="http://fr.wikipedia.org/wiki/ICO_%28format_de_fichier%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li>
</ul>
<div class="note">
  <p><strong>Note :</strong><br />
    Le support pour le format <a class="external" href="http://en.wikipedia.org/wiki/X_BitMap" title="http://en.wikipedia.org/wiki/X_BitMap">XBM</a> a été retiré dans Gecko 1.9.2.</p>
</div>
<h2 id="Interaction_avec_le_CSS">Interaction avec le CSS</h2>
<p>Au niveau du CSS un élément <code>&lt;img&gt;</code> est un <a href="/fr/docs/CSS/Replaced_element" title="CSS/Replaced_element">élément remplacé</a>. Il n'a pas de ligne de base, ce qui veut dire que quand il est utilisé dans un environnement au format texte (<em>inline</em>) : {{cssxref("vertical-align")}}<code>: baseline</code>, le bas de l'image sera affiché au niveau de la ligne de base du conteneur.</p>
<p>Selon son type, une image peut avoir, mais pas nécessairement, une dimension intrinsèque. Une image vectorielle (SVG) n'a pas de dimension intrinsèque alors qu'une image matricielle en a une.</p>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: html">
&lt;img src="image.jpg" alt="Une superbe image" /&gt;
</pre>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'embedded-content-1.html#the-img-element', '&lt;img&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-img-element.html#the-img-element', '&lt;img&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'objects.html#h-13.2', '&lt;img&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>1.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
  <li>Les éléments {{HTMLElement("object")}} et {{HTMLElement("embed")}}</li>
</ul>
Revenir à cette révision