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.
| Prérequis : | Vous devriez vous être familiarisé-e avec la création de documents HTML simples. |
|---|---|
| Objectifs : | Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML. |
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, l'article sur les images adaptatives (responsive) pourra vous intéresser.
Ce dont vous avez besoin
Vous allez écrire un élément <img>, mais pour remplir ses attributs correctement, il faut les informations correspondantes :
- L'URL (absolue ou relative) de l'image
- Un équivalent textuel pour toute fonctionnalité ou information utile contenue dans l'image
- La hauteur et la largeur qu'on souhaite donner à l'image dans la page (ce n'est pas obligatoire mais cela permet d'accélerer le rendu)
Une fois ces informations récoltées, vous pouvez écrire un élément <img> dans le code de votre page. <img> est un élément vide et il n'y a donc pas de balise fermante </img>, il suffit uniquement de placer une barre oblique (slash) avant le chevron fermant de la balise : <img ... />. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :
<img
src="images/graphique-camembert.png"
alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]"
height="300px"
width="300px"
/>
Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut alt peut être laissé blanc :
<img src="images/licorne.png" alt="" />
Attention ! La plupart des images sont couvertes par le droit d'auteur. Vous ne devez pas afficher une image sur votre page web sauf si
- Vous possédez l'image, ou
- Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou
- Si vous disposez de preuves comme quoi l'image appartient au domaine public
De plus, il ne faut jamais faire point l'attribut src vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du "hotlinking" : 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.
Il est possible de transformer une image en lien en imbriquant un élément <img> dans un élément <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, voir notre tutoriel sur comment ajouter des hyperliens.
Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs height/width, src, et alt.
height et width
height et width 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é.
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.
src
Vous pourriez fournir une URL complète, composée d'un chemin absolu et d'un nom de fichier (par exemple https://exemple.com/images/licorne.png) 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 domaine que votre page web (encore une fois, le hotlinking est inacceptable).
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.
La plupart du temps, vous aurez à utiliser un chemin relatif 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 (../) ou utiliser un seul point (./) pour faire référence au répertoire courant.
Si, par exemple, la page web courante est https://exemple.com/animaux/mythique.html et que l'image se situe à https://exemple.com/images/licorne.png, vous pourrez écrire ce chemin relatif : src="../images/licorne.png".
À des fins de référencement (SEO), il est préférable de donner un nom descriptif pour le fichier (licorne.png sera mieux que img835.png). Google recommande également que l'ensemble des images soient placées dans un répertoire images.
alt
Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :
- le fichier image est invalide ou le navigateur ne supporte pas ce type d'image
- le chemin ou le nom de fichier fourni pour l'image est incorrect
- les visiteurs utilisent des logiciels qui lisent l'écran
- 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)
Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.
Si vous insérez des images dans votre site, vous devez utiliser un attribut alt. 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 alt ? Cela dépend avant tout du rôle de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).
- Décoration. Si l'image n'est utilisée que pour décorer, un attribut
altvide suffira (alt=""). Pour être tout à fait précis, les images décoratives ne devraient pas faire partie du code HTML mais des fichiers 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 surcontentoubackground-image. - Contenu. Si votre image fournit des informations conséquentes, fournissez les mêmes informations grâce à un texte bref pour l'attribut
alt. 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é pouralt). - Lien. Si vous placez une image dans une balise
<a>, vous devez fournir un texte alternatif pour le lien. À vous de choisir si vous utilisez l'élément<a>ou l'attributaltde l'image pour le faire. - Texte. 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
alt.
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.