path: root/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html

---
title: Ajouter des images à une page web
slug: conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
tags:
  - Beginner
  - Composing
  - HTML
  - NeedsActiveLearning
  - OpenPractices
translation_of: >-
  Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage
translation_of_original: Learn/HTML/Howto/Add_images_to_a_webpage
original_slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web
---
<p class="summary">Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectifs :</th>
   <td>Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p>Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans,<a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage"> l'article sur les images adaptatives (responsive)</a> pourra vous intéresser.</p>
</div>

<h2 id="Ce_dont_vous_avez_besoin">Ce dont vous avez besoin</h2>

<p>Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :</p>

<ul>
 <li>L'{{glossary("URL")}} (absolue ou relative) de l'image</li>
 <li>Un équivalent textuel pour toute fonctionnalité ou information utile contenue dans l'image</li>
 <li>La hauteur et la largeur qu'on souhaite donner à l'image dans la page (ce n'est pas <em>obligatoire</em> mais cela permet d'accélerer le rendu)</li>
</ul>

<p>Une fois ces informations récoltées, vous pouvez écrire un élément <code>&lt;img&gt;</code> dans le code de votre page. <code>&lt;img&gt;</code> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante <code>&lt;/img&gt;</code>, il suffit uniquement de placer une barre oblique (<em>slash</em>) avant le chevron fermant de la balise : <code>&lt;img ... /&gt;</code>. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :</p>

<pre class="brush: html">&lt;img
    src="images/graphique-camembert.png"
    alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]"
    height="300px"
    width="300px"
/&gt;
</pre>

<p>Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut <code>alt</code> peut être laissé blanc :</p>

<pre class="brush: html">&lt;img src="images/licorne.png" alt="" /&gt;
</pre>

<div class="warning">
<p><strong>Attention !</strong> La plupart des images sont couvertes par le droit d'auteur. <strong>Vous ne devez pas</strong> afficher une image sur votre page web sauf si</p>

<ol>
 <li>Vous possédez l'image, ou</li>
 <li>Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou</li>
 <li>Si vous disposez de preuves comme quoi l'image appartient au domaine public</li>
</ol>

<p>De plus, il ne faut <strong>jamais</strong> faire point l'attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du <em>"hotlinking"</em> : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.</p>
</div>

<p class="note">Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink">voir notre tutoriel sur comment ajouter des hyperliens.</a></p>

<p>Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs <code>height</code>/<code>width</code>, <code>src</code>, et <code>alt</code>.</p>

<h2 id="height_et_width"><code>height</code> et <code>width</code></h2>

<p><code>height</code> et <code>width</code> ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.</p>

<p>Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.</p>

<h2 id="src"><code>src</code></h2>

<p>Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin <em>absolu</em> et d'un nom de fichier (par exemple <code>https://exemple.com/images/licorne.png</code>) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le <em>hotlinking</em> est inacceptable).</p>

<p>Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.</p>

<p>La plupart du temps, vous aurez à utiliser un chemin <em>relatif </em>suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (<code>../</code>) ou utiliser un seul point (<code>./</code>) pour faire référence au répertoire courant.</p>

<p>Si, par exemple, la page web courante est <code>https://exemple.com/animaux/mythique.html</code> et que l'image se situe à <code>https://exemple.com/images/licorne.png</code>, vous pourrez écrire ce chemin relatif : <code>src="../images/licorne.png</code><code>"</code>.</p>

<div class="note">
<p>À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (<code>licorne.png</code> sera mieux que <code>img835.png</code>). Google recommande également que l'ensemble des images soient placées dans un répertoire <code>images</code>.</p>
</div>

<h2 id="alt"><code>alt</code></h2>

<p>Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :</p>

<ul>
 <li>le fichier image est invalide ou le navigateur ne supporte pas ce type d'image</li>
 <li>le chemin ou le nom de fichier fourni pour l'image est incorrect</li>
 <li>les visiteurs utilisent des logiciels qui lisent l'écran</li>
 <li>les visiteurs ont désactivé le chargement des images afin de réduire le volume de données transférées (point notamment valable pour les téléphones)</li>
</ul>

<p>Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.</p>

<p>Si vous insérez des images dans votre site, vous devez utiliser un attribut <code>alt</code>. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut <code>alt</code> ? Cela dépend avant tout du <em>rôle</em> de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).</p>

<ul>
 <li><strong>Décoration.</strong> Si l'image n'est utilisée que pour décorer, un attribut <code>alt</code> vide suffira (<code>alt=""</code>). Pour être tout à fait précis, les images décoratives ne devraient pas faire partie du code HTML mais des fichiers {{glossary("CSS")}} qui peuvent être utilisés pour gérer tout ce qui a trait à la présentation visuelle. Pour plus d'informations sur comment ajouter des images avec CSS, voir les pages sur {{cssxref('content')}} ou {{cssxref("background-image")}}.</li>
 <li><strong>Contenu.</strong> Si votre image fournit des informations conséquentes, fournissez les mêmes informations grâce à un texte <em>bref</em> pour l'attribut <code>alt</code>. Mieux encore, fournissez l'information sous forme de texte dans la page web (auquel cas, il n'est pas nécessaire de réécrire l'information dans le texte utilisé pour <code>alt</code>).</li>
 <li><strong>Lien.</strong> Si vous placez une image dans une balise {{htmlelement("a")}}, vous devez fournir <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">un texte alternatif pour le lien</a>. À vous de choisir si vous utilisez l'élément <code>&lt;a&gt;</code> ou l'attribut <code>alt</code> de l'image pour le faire.</li>
 <li><strong>Texte.</strong> Vous ne devriez pas utiliser d'images qui contiennent du texte ! (si vous voulez réaliser des effets de style sur un texte, CSS est là pour ça. Dans le cas où vous devez le faire malgré tout, le texte doit être fourni dans l'attribut <code>alt</code>.</li>
</ul>

<p>Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.</p>

<h2 id="En_savoir_plus">En savoir plus</h2>

<ul>
 <li>L'élément {{htmlelement("img")}}</li>
 <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li>
 <li><a href="/fr/Apprendre/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li>
 <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Comment ajouter une carte de zones cliquables sur une image</a></li>
</ul>