Les images en HTML

Comment intégrer une image à une page web ?

Pour mettre une image sur une page web, nous utilisons l'élément <img>. C'est un élément vide (ce qui signifie qu'il ne peut pas avoir de contenu enfant et ne peut pas avoir de balise de fermeture) qui nécessite deux attributs pour être utile : src et alt. L'attribut src contient une URL pointant vers l'image que vous souhaitez intégrer dans la page. Comme pour l'attribut href des éléments <a>, l'attribut src peut être une URL relative ou une URL absolue. Sans attribut src, un élément img n'a pas d'image à charger.

L'attribut alt est décrit ci-dessous.

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci :

<img src="dinosaur.jpg" alt="Dinosaure" />

Si l'image se trouvait dans un sous-répertoire images, qui se trouvait dans le même répertoire que la page HTML, vous l'intégrez comme ceci :

<img src="images/dinosaur.jpg" alt="Dinosaure" />

Et ainsi de suite.

Vous pouvez également intégrer l'image en utilisant son URL absolue, par exemple :

<img src="https://www.exemple.fr/images/dinosaur.jpg" alt="Dinosaure" />

L'utilisation de URLs absolues n'est cependant pas recommandée. Vous devez héberger les images que vous souhaitez utiliser sur votre site, ce qui, dans des configurations simples, signifie garder les images de votre site sur le même serveur que votre HTML. De plus, il est plus efficace d'utiliser des URLs relatives que des URLs absolues en termes de maintenance (lorsque vous déplacez votre site vers un autre domaine, vous n'avez pas besoin de mettre à jour toutes vos URLs pour inclure le nouveau domaine). Dans des configurations plus avancées, vous pouvez utiliser un CDN (Content Delivery Network) pour distribuer vos images.

Si vous n'avez pas créé les images, vous devez vous assurer que vous avez la permission de les utiliser selon les conditions de la licence sous laquelle elles sont publiées (voir Ressources multimédias et licences ci-dessous pour plus d'informations).

Le code précédent, que ce soit avec l'URL absolue ou relative, nous donne le résultat suivant :

Texte alternatif

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Par exemple, le code au-dessus peut être modifié de cette manière :

<img
  src="images/dinosaur.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues" />

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

Pourquoi vous voyez partout du texte alternatif ? Vous en avez besoin, car c'est très pratique en maintes occasions :

• L'utilisateur·ice est malvoyant·e et utilise un lecteur d'écran pour écouter le contenu du site web. En réalité, la présence d'un texte alternatif décrivant les images est utile à la plupart des utilisateur·ice·s.
• Comme décrit ci-dessus, l'orthographe du nom du fichier ou du chemin d'accès peut être erronée.
• Le navigateur ne prend pas en charge le type d'image. Certaines personnes utilisent encore des navigateurs en mode texte, tels que Lynx, qui affichent le texte alternatif des images.
• Vous pouvez souhaiter fournir du texte à l'intention des moteurs de recherche ; par exemple, ceux-ci peuvent faire correspondre le texte alternatif avec les requêtes de recherche.
• Les utilisateur·ice·s ont désactivé les images pour réduire le volume de données transférées et les distractions. C'est particulièrement courant sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûteuse.

Que devez-vous exactement écrire dans votre attribut alt ? Cela dépend de la raison pour laquelle l'image est là. En d'autres termes, de ce que vous perdez si votre image ne s'affiche pas :

• Décoration. Vous devez utiliser des images d'arrière-plan CSS pour les images décoratives, mais si vous devez utiliser du HTML, ajoutez un alt="" vide. Si l'image ne fait pas partie du contenu, un lecteur d'écran ne doit pas perdre de temps à la lire.
• Contenu. Si votre image apporte des informations importantes, reprenez ces informations dans un texte alt bref — ou mieux encore, dans le corps du texte que tout le monde peut voir. N'écrivez pas de texte alt redondant. Ne serait-ce pas agaçant pour un·e utilisateur·ice voyant·e si tous les paragraphes étaient rédigés deux fois dans le contenu principal ? Si l'image est suffisamment décrite par le corps du texte, vous pouvez simplement utiliser alt="".
• Lien. Si vous placez une image entre les balises <a> pour la transformer en lien, vous devez tout de même fournir un texte de lien accessible. Dans ce cas, vous pouvez soit l'écrire à l'intérieur du même élément <a>, soit à l'intérieur de l'attribut alt de l'image — selon ce qui fonctionne le mieux dans votre cas.
• Texte. Vous ne devez pas mettre votre texte dans des images. Si votre titre principal a besoin d'une ombre portée, par exemple, utilisez CSS pour cela plutôt que de mettre le texte dans une image. Cependant, si vous ne pouvez vraiment pas éviter de le faire, vous devez fournir le texte à l'intérieur de l'attribut alt.

Essentiellement, l'essentiel est de fournir une expérience utilisable, même lorsque les images ne peuvent pas être vues. Cela garantit que tous les utilisateur·ice·s ne manquent aucune partie du contenu. Essayez de désactiver les images dans votre navigateur et voyez comment les choses apparaissent. Vous pouvez rapidement réaliser à quel point le texte alternatif est utile si l'image ne peut pas être vue.

Largeur et hauteur

Vous pouvez vous servir des attributs width et height pour définir la largeur et la hauteur de votre image. Ils sont donnés sous forme d'entiers sans unité et représentent la largeur et la hauteur de l'image en pixels.

Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

<img
  src="images/dinosaur.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
  width="400"
  height="341" />

Il y a une très bonne raison à cela. Le code HTML de votre page et l'image constituent des ressources distinctes, récupérées par le navigateur sous forme de requêtes HTTP(S) séparées. Dès que le navigateur a reçu le code HTML, il commence à l'afficher à l'utilisateur·ice. Si les images n'ont pas encore été reçues (ce qui est souvent le cas, car la taille des fichiers image est souvent bien supérieure à celle des fichiers HTML), le navigateur n'affiche alors que le code HTML et met à jour la page avec l'image dès qu'il la reçoit.

Par exemple, supposons que nous ayons du texte après l'image :

<h1>Images en HTML</h1>

<img
  src="dinosaur.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
  title="Un T-Rex exposé au musée de l'université de Manchester." />
<blockquote>
  <p>
    Mais là-bas, il fait sombre maintenant, et ce n'est pas le bel aquarium
    éclairé qu'elle imaginait pendant les heures de jour, tourbillonnant avec
    des bancs de petits, délicats animaux flottant et dansant lentement selon
    leurs propres courants sereins et créant l'apparence d'une peinture vivante.
    C'était faux, en tout cas. L'océan était différent d'un aquarium, qui était
    un environnement artificiel. L'océan était un monde. Et un monde n'est pas
    de l'art. Dorothy pensait aux êtres vivants qui se déplaçaient dans ce monde
    : grands, impitoyables et affamés. Comme nous là-haut.
  </p>
  <footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer>
</blockquote>

Dès que le navigateur télécharge le HTML, il commence à afficher la page.

Une fois l'image chargée, le navigateur ajoute l'image à la page. Comme l'image prend de la place, le navigateur doit déplacer le texte vers le bas de la page, pour faire de la place à l'image au-dessus :

Déplacer le texte de cette manière est extrêmement distrayant pour les utilisateur·ice·s, surtout s'ils ont déjà commencé à le lire, et cela oblige également le navigateur à re-render la page, ce qui est mauvais pour les performances.

Si vous définissez la taille réelle de l'image dans votre HTML en utilisant les attributs width et height, le navigateur sait alors combien d'espace réserver pour l'image avant même de l'avoir téléchargée.

Cela signifie que lorsque l'image a été téléchargée, le navigateur n'a pas besoin de déplacer le contenu environnant.

Pour un excellent article sur l'histoire de cette fonctionnalité, voir Définir la hauteur et la largeur des images est à nouveau important ^(angl.).

Notez que s'il n'y a pas de contenu en dessous de l'image, le re-rendering n'est pas un problème, car le redimensionnement de l'image ne fait pas déplacer les autres éléments. Dans ce cas, vous pouvez définir uniquement la width de l'image. Si vous définissez une width mais pas de height, la height par défaut est auto, ce qui signifie qu'elle est définie à une valeur qui maintient le rapport d'aspect de l'image.

Redimensionner les images

Bien que, comme nous l'avons dit, il soit recommandé de définir la taille réelle de vos images en utilisant les attributs HTML, vous ne devez pas les utiliser pour redimensionner les images.

Si vous définissez une taille d'image trop grande, vous vous retrouvez avec des images qui semblent granuleuses, floues ou trop petites, et vous gaspillez de la bande passante en téléchargeant une image qui ne correspond pas aux besoins de l'utilisateur·ice. L'image peut également finir par sembler déformée si vous ne maintenez pas le rapport d'aspect correct. Vous devez utiliser un éditeur d'images pour mettre votre image à la bonne taille avant de la mettre sur votre page web.

Si vous devez modifier la taille d'une image, vous devez utiliser CSS à la place.

Titre d'images

Comme décrit dans le chapitre Création d'hyperliens, vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

<img
  src="images/dinosaur.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
  width="400"
  height="341"
  title="Un T-Rex exposé au musée de l'université de Manchester." />

Cela donne une info-bulle avec le texte entré dans l'attribut title :

Cependant, cela n'est pas recommandé — l'attribut title présente un certain nombre de problèmes d'accessibilité, principalement liés au fait que le support des lecteurs d'écran est très imprévisible et que la plupart des navigateurs ne l'affichent que si vous survolez avec une souris (donc par exemple, pas d'accès pour les utilisateur·ice·s au clavier). Si vous souhaitez en savoir plus à ce sujet, lisez Les épreuves et tribulations de l'attribut title ^(angl.) par Scott O'Hara.

Il est préférable d'inclure ces informations supplémentaires dans le texte principal de l'article, plutôt que de les attacher à l'image.

Exercice sur l'intégration d'images

Il est maintenant temps de jouer ! Cette tâche vous permet d'intégrer une image.

1. Cliquez sur "Exécuter" dans le bloc de code ci-dessous pour éditer l'exemple dans le MDN Playground.

2. Modifiez la balise <img> existante afin qu'elle intègre l'image située à l'URL suivante :

   url

   https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
   

   Note : Nous avons dit plus tôt de ne jamais faire de « hotlinking » sur d'autres serveurs sans permission, mais cette image se trouve sur notre dépôt GitHub, donc c'est OK.

3. Ajoutez un attribut alt à l'image. Vous pouvez vérifier que le texte alternatif fonctionne en faisant temporairement une faute dans l'URL de l'image.

4. Réglez la largeur et la hauteur correctes de l'image (indice : elle fait 200px de large et 171px de haut), puis expérimentez avec d'autres valeurs pour voir l'effet.

5. Ajoutez un title à l'image.

Si vous faites une erreur, vous pouvez effacer votre travail en utilisant le bouton Réinitialiser dans le MDN Playground. Si vous êtes vraiment bloqué, vous pouvez consulter la solution sous le bloc de code.

<img />

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
  width="200"
  height="171"
  title="Un T-Rex exposé au musée de l'université de Manchester." />

Ressources multimédias et licences

Les images (et autres types de ressources multimédias) que vous trouvez sur le web sont publiées sous différents types de licences. Avant d'utiliser une image sur un site que vous construisez, assurez-vous d'en être propriétaire, d'avoir la permission de l'utiliser ou de respecter les conditions de licence du propriétaire.

Comprendre les types de licences

Regardons quelques catégories courantes de licences que vous êtes susceptible de trouver sur le web.

Tous droits réservés

Les créateurs d'œuvres originales telles que des chansons, des livres ou des logiciels publient souvent leur travail sous une protection stricte du droit d'auteur·ice. Cela signifie que, par défaut, ils (ou leur éditeur) ont des droits exclusifs pour utiliser (par exemple, afficher ou distribuer) leur travail. Si vous souhaitez utiliser des images protégées par le droit d'auteur·ice avec une licence tous droits réservés, vous devez faire l'une des choses suivantes :

• Obtenir une permission explicite et écrite du titulaire du droit d'auteur·ice.
• Payer des frais de licence pour les utiliser. Cela peut être des frais uniques pour une utilisation illimitée (« libre de droits »), ou cela peut être « géré par droits », auquel cas vous devez peut-être payer des frais spécifiques par utilisation selon le créneau horaire, la région géographique, l'industrie ou le type de média, etc.
• Limiter vos utilisations à celles qui seraient considérées comme usage équitable ^(angl.) ou traitement équitable ^(angl.) dans votre juridiction.

Les auteur·ice·s ne sont pas tenus d'inclure un avis de droit d'auteur·ice ou des conditions de licence avec leur travail. Le droit d'auteur·ice existe automatiquement dans une œuvre originale dès qu'elle est créée dans un support tangible. Ainsi, si vous trouvez une image en ligne et qu'il n'y a pas d'avis de droit d'auteur·ice ou de conditions de licence, la solution la plus sûre est de supposer qu'elle est protégée par le droit d'auteur·ice avec tous les droits réservés.

Permissive

Si l'image est publiée sous une licence permissive, telle que MIT ^(angl.), BSD ^(angl.), ou une licence Creative Commons (CC) appropriée ^(angl.), vous n'avez pas besoin de payer de frais de licence ou de demander une autorisation pour l'utiliser. Cependant, il existe diverses conditions de licence que vous devez respecter, qui varient selon la licence.

Par exemple, vous pouvez être tenu·e de :

• Fournir un lien vers la source originale de l'image et créditer son créateur.
• Indiquer si des modifications ont été apportées à l'image.
• Partager toute œuvre dérivée créée à partir de l'image sous la même licence que l'originale.
• Ne pas partager du tout des œuvres dérivées.
• Ne pas utiliser l'image dans un travail commercial.
• Inclure une copie de la licence avec toute publication utilisant l'image.

Vous devez consulter la licence applicable pour connaître les conditions spécifiques que vous devez respecter.

Les licences copyleft sont particulièrement présentes dans le monde du logiciel. L'idée de base est qu'un nouveau projet construit avec le code d'un projet sous licence copyleft (ce que l'on appelle une « bifurcation » du logiciel original) doit également être licencié sous la même licence copyleft. Cela garantit que le code source du nouveau projet est également disponible pour que d'autres puissent l'étudier et le modifier. Notez que, en général, les licences rédigées pour les logiciels, telles que la GPL, ne sont pas considérées comme de bonnes licences pour les œuvres non logicielles, car elles n'ont pas été rédigées en tenant compte des œuvres non logicielles.

Explorez les liens fournis plus haut dans cette section pour en savoir plus sur les différents types de licences et les conditions qu'elles définissent.

Domaine public/CC0

Les œuvres publiées dans le domaine public sont parfois appelées « aucun droit réservé » — aucun droit d'auteur·ice ne s'applique, et elles peuvent être utilisées sans autorisation et sans avoir à respecter des conditions de licence. Une œuvre peut entrer dans le domaine public par divers moyens, tels que l'expiration du droit d'auteur·ice ou la renonciation spécifique aux droits.

L'une des façons les plus efficaces de placer une œuvre dans le domaine public est de la licencier sous CC0 ^(angl.), une licence Creative Commons spécifique qui fournit un outil juridique clair et sans ambigüité à cet effet.

Lors de l'utilisation d'images du domaine public, obtenez une preuve que l'image est bien dans le domaine public et conservez cette preuve pour vos dossiers. Par exemple, prenez une capture d'écran de la source originale avec le statut de licence clairement affiché, et envisagez d'ajouter une page à votre site Web avec une liste des images acquises ainsi que leurs exigences de licence.

Recherche d'images sous licence permissive

Vous pouvez trouver des images sous licence permissive pour vos projets en utilisant un moteur de recherche d'images ou directement à partir de dépôts d'images.

Recherchez des images en utilisant une description de l'image que vous recherchez ainsi que des termes de licence pertinents. Par exemple, lors de la recherche de « dinosaure jaune », ajoutez « images du domaine public », « bibliothèque d'images du domaine public », « images sous licence ouverte » ou des termes similaires à la requête de recherche.

Certains moteurs de recherche disposent d'outils pour vous aider à trouver des images avec des licences permissives. Par exemple, lors de l'utilisation de Google, allez dans l'onglet « Images » pour rechercher des images, puis cliquez sur « Outils ». Il y a un menu déroulant « Droits d'usage » dans la barre d'outils résultante où vous pouvez choisir de rechercher spécifiquement des images sous licences Creative Commons.

Les sites de dépôt d'images, tels que Flickr ^(angl.), ShutterStock ^(angl.), et Pixabay ^(angl.), disposent d'options de recherche permettant de rechercher uniquement des images sous licence permissive. Certains sites distribuent exclusivement des images et des icônes sous licence permissive, tels que Picryl ^(angl.) et The Noun Project ^(angl.).

Conformément à la licence sous laquelle l'image a été publiée, il s'agit de trouver les détails de la licence, de lire la page de licence ou d'instructions fournie par la source, puis de suivre ces instructions. Les dépôts d'images réputés rendent leurs conditions de licence claires et faciles à trouver.

Légender des images avec figure et figcaption

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui vont avec votre image. Par exemple, rien ne vous empêche de faire ceci :

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
    width="400"
    height="341" />

  <p>Un T-Rex exposé au musée de l'université de Manchester.</p>
</div>

C'est acceptable. Cela contient le contenu dont vous avez besoin et peut être facilement mis en forme à l'aide de CSS. Mais il y a un problème : rien ne relie sémantiquement l'image à sa légende, ce qui peut poser des difficultés aux lecteurs d'écran. Par exemple, lorsque vous avez 50 images et légendes, quelle légende correspond à quelle image ?

Une meilleure solution consiste à utiliser les éléments HTML <figure> et <figcaption>. Ceux-ci ont été créés précisément dans ce but : fournir un conteneur sémantique pour les figures et relier clairement la figure à sa légende. Notre exemple ci-dessus peut être réécrit comme suit :

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="La tête et le torse d'un squelette de dinosaure ;
            il a une grande tête avec de longues dents pointues"
    width="400"
    height="341" />

  <figcaption>
    Un T-Rex exposé au musée de l'université de Manchester.
  </figcaption>
</figure>

L'élément <figcaption> dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément <figure>.

Une figure n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

• exprime votre désir d'accessibilité et de compréhension facilitée.
• peut se placer en plusieurs endroits dans une page à flot linéaire.
• Fournit une information essentielle qui supporte le texte principal.

Une figure peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

Créer une figure

Dans cette tâche, nous vous demandons de prendre le code terminé de la tâche précédente comme point de départ et de le transformer en figure :

1. Cliquez sur "Exécuter" dans le bloc de code ci-dessous pour éditer l'exemple dans le MDN Playground.
2. Encapsulez l'élément <img> dans un élément <figure>.
3. Copiez le texte de l'attribut title, mettez-le dans un élément <figcaption> sous l'image, puis supprimez l'attribut title.

Si vous faites une erreur, vous pouvez remettre votre travail à zéro en utilisant le bouton Reset dans le MDN Playground. Si vous êtes vraiment bloqué, vous pouvez consulter la solution ci-dessous le bloc de code.

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="La tête et le torse d'un squelette de dinosaure ; il a une grande tête avec de longues dents acérées"
  width="200"
  height="171"
  title="Un T-Rex exposé au musée de l'université de Manchester." />

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="La tête et le torse d'un squelette de dinosaure ; il a une grande tête avec de longues dents acérées"
    width="200"
    height="171" />
  <figcaption>
    Un T-Rex exposé au musée de l'université de Manchester.
  </figcaption>
</figure>

Images d'arrière-plan CSS

Vous pouvez également utiliser le CSS pour intégrer des images dans des pages web (et JavaScript, mais c'est une tout autre histoire). La propriété CSS background-image, ainsi que les autres propriétés background-*, permettent de contrôler le placement des images d'arrière-plan. Par exemple, pour appliquer une image d'arrière-plan à chaque paragraphe d'une page, vous pouvez procéder comme suit :

p {
  background-image: url("images/dinosaur.jpg");
}

L'image intégrée ainsi obtenue est sans doute plus facile à positionner et à contrôler que les images HTML. Alors pourquoi s'embêter avec les images HTML ? Comme évoqué plus haut, les images d'arrière-plan CSS sont uniquement destinées à la décoration. Si vous souhaitez simplement ajouter un élément esthétique à votre page pour en améliorer l'aspect visuel, cela convient parfaitement. Cependant, ces images n'ont absolument aucune signification sémantique. Elles ne peuvent pas avoir d'équivalent textuel, sont invisibles pour les lecteurs d'écran, etc. C'est là que les images HTML prennent tout leur sens !

Récapitulons : si une image a une signification par rapport à votre contenu, vous devez utiliser une image HTML. Si une image est purement décorative, vous devez utiliser des images d'arrière-plan CSS (nous aborderons ce sujet en détail plus tard dans les modules de base).

Résumé

C'est tout pour le moment. Nous avons abordé en détail les images et les légendes.

Dans le prochain article, nous vous proposerons des tests que vous pourrez utiliser pour vérifier dans quelle mesure vous avez compris et retenu les informations que nous avons fournies sur les images HTML.

• Précédent
• Aperçu : Structurer le contenu avec HTML
• Suivant