Images HTML

Les signets vous font sauter dans le texte. Les images apportent photos, schémas et logos dans la page. L’outil HTML de base est l’élément vide img : en usage normal, il n’entoure pas une légende entre balises ouvrante et fermante. Il pointe vers un fichier avec src et propose une alternative textuelle avec alt.

Ce que fait img

img est un élément remplacé. Le navigateur récupère la ressource à src et la dessine dans la mise en page. Si le fichier manque ou est bloqué, les visiteurs ont encore besoin d’un alt utile (ou, pour une pure décoration, d’un alt="" explicitement vide). Les chemins suivent les mêmes règles relatives et absolues que pour les liens et les favicons.

Réponse directe

Écrivez <img src="path/to/file.jpg" alt="short description">.

• src — où se trouve le fichier image
• alt — alternative textuelle quand l’image ne peut pas être vue ou échoue au chargement
  Les width et height optionnels peuvent réserver de l’espace et réduire les sauts de mise en page. Préférez compresser les photos trop lourdes plutôt que d’envoyer des fichiers de plusieurs mégaoctets à chaque apprenant sur une connexion lente.

Attributs essentiels en un coup d’œil

Une image informative de base

Placez les images dans un dossier clair comme images/ et décrivez ce qui compte dans alt.

Lire l’exemple de base

• src="images/team.jpg" est un chemin relatif depuis le fichier HTML
• alt explique le sens de la photo pour les lecteurs d’écran et les chargements échoués
• Il n’y a pas de </img> de fermeture séparée en écriture HTML normale — les attributs vivent sur la balise unique
• Si le dossier ou le nom de fichier est faux, l’image casse même quand la balise a l’air parfaite

Indications width et height

Donner width et height aide le navigateur à réserver l’espace avant l’arrivée des octets. Faites correspondre le ratio d’aspect du fichier réel quand vous le pouvez, pour que l’image ne paraisse pas étirée. Réduire une énorme photo seulement avec des attributs HTML télécharge encore le fichier énorme — redimensionnez et compressez les assets pour le web.

Images décoratives et alt vide

Quand une image n’ajoute aucune information — un ornement purement décoratif déjà couvert par le texte voisin — utilisez alt="". N’omettez pas l’attribut. Omettre alt et écrire alt="" vide sont différents : vide signifie « ignore-moi pour les arbres d’accessibilité », manquant signifie souvent « quelque chose a mal tourné dans le balisage ».

Écrire alt pour le sens, pas pour le spam

Un bon alt est un court substitut de l’image dans le contexte : ce dont un utilisateur voyant aurait besoin pour comprendre la page. Un mauvais alt bourre des mots-clés, répète une légende déjà imprimée à côté de l’image, ou dit « image » sans contenu. Si l’image est un graphique, résumez l’idée principale ; si c’est un logo qui sert aussi de lien d’accueil, le nom accessible du lien vient en général du alt de l’image ou du texte autour — restez honnête.

Formats de fichiers que les débutants rencontrent

JPEG (.jpg) convient aux photos. PNG convient aux graphiques aux bords nets ou à la transparence. SVG convient aux icônes et logos simples quand vous voulez un redimensionnement net (vous verrez plus de motifs SVG plus tard). Choisissez un format adapté au contenu, puis gardez le poids du fichier raisonnable.

Pratiquer dans votre éditeur

1. Placez un petit .jpg ou .png dans un dossier images.
2. Ajoutez un img avec un src relatif correct et un alt clair.
3. Ajoutez width et height qui correspondent au ratio d’aspect.
4. Cassez volontairement le chemin une fois — confirmez que alt (ou l’interface d’image cassée) vous aide à remarquer l’erreur, puis corrigez le chemin.
5. Ajoutez une image décorative avec alt="" et confirmez que vous n’avez pas supprimé l’attribut entièrement.

Erreurs faciles

• alt manquant sur les images informatives
• Mauvais dossier ou orthographe dans src
• Envoyer une photo d’appareil de plusieurs mégaoctets quand un fichier web plus petit suffirait
• Traiter alt comme une décharge de mots-clés
• Étirement des logos avec width/height désaccordés
• Confondre src (images) avec href (liens)

Résumé

• Les images utilisent img avec src et alt
• Les chemins suivent les mêmes règles que les autres fichiers du site
• alt soutient l’accessibilité et les chargements échoués ; utilisez alt="" seulement pour la pure décoration
• Width et height peuvent réserver de l’espace ; optimisez quand même la taille réelle du fichier
• Choisissez un format sensé et gardez les téléchargements légers