Les bonnes pratiques pour les images en HTML

Intégrer une image en HTML, c’est simple. L’intégrer correctement, c’est une autre histoire. Un attribut manquant, une taille non définie, un format mal choisi : et votre page ralentit, votre référencement en pâtit, et vos utilisateurs en situation de handicap n’ont accès à rien.

Ce guide rassemble toutes les bonnes pratiques pour les images en HTML. Il s’adresse aussi bien aux développeurs débutants qu’aux intégrateurs plus expérimentés qui veulent mettre à jour leurs habitudes. Les conseils sont concrets, directement applicables, et couvrent à la fois l’accessibilité, la performance et le SEO.

L’attribut alt : indispensable et souvent mal utilisé

L’attribut alt est la première bonne pratique à maîtriser. Il fournit une description textuelle de l’image pour les lecteurs d’écran, les moteurs de recherche et les navigateurs qui n’affichent pas l’image.

Quand et comment rédiger un bon texte alternatif

Le texte alternatif doit décrire le contenu et la fonction de l’image, pas son apparence générale. Voici quelques règles simples :

• Pour une image porteuse de sens : décrivez ce qu’elle montre ou ce qu’elle apporte à la compréhension du contenu.
• Pour une image décorative : laissez l’attribut vide (alt=""), mais ne l’omettez jamais complètement.
• Pour une image cliquable (lien) : décrivez la destination ou l’action, pas l’image elle-même.
• Évitez les formulations du type « image de » ou « photo de » : les lecteurs d’écran annoncent déjà qu’il s’agit d’une image.

Exemple concret :

<!-- Mauvais -->
<img src="chat.jpg" alt="image">
<!-- Bon -->
<img src="chat.jpg" alt="Chat roux allongé sur un canapé bleu">
<!-- Image décorative -->
<img src="separateur.png" alt="">

Toujours définir la largeur et la hauteur de l’image

Depuis la généralisation du calcul du Cumulative Layout Shift (CLS) dans les Core Web Vitals de Google, spécifier les dimensions d’une image n’est plus optionnel. Sans elles, le navigateur ne peut pas réserver l’espace nécessaire avant que l’image soit chargée, ce qui provoque des sauts de mise en page visibles.

La solution est simple et rapide à mettre en place :

<img src="photo.jpg" alt="Description de la photo" width="800" height="600">

Ces valeurs correspondent aux dimensions réelles de l’image source. Le CSS peut ensuite adapter l’affichage de manière responsive sans perdre le ratio attendu par le navigateur.

Choisir le bon format d’image

Le format de l’image a un impact direct sur la performance de la page. Un mauvais choix peut doubler le poids d’un fichier sans aucun gain de qualité visible.

Les formats à connaître

• JPEG (ou JPG) : idéal pour les photographies et les images à nombreuses couleurs. Offre un bon compromis qualité/poids.
• PNG : adapté aux images nécessitant de la transparence ou aux visuels avec des aplats de couleur (logos, icônes, captures d’écran).
• WebP : format moderne, plus léger que JPEG et PNG pour une qualité équivalente. Compatible avec tous les navigateurs actuels. À privilégier dans la plupart des cas.
• AVIF : encore plus performant que WebP, mais le support navigateur reste à vérifier selon votre cible.
• SVG : parfait pour les icônes et illustrations vectorielles. Léger, responsive et retina-ready par nature.

Utiliser la balise picture pour la compatibilité

La balise <picture> permet de proposer plusieurs formats selon les capacités du navigateur. C’est une solution prête à l’emploi et compatible avec tous les environnements :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image" width="800" height="600">
</picture>

Le navigateur choisit automatiquement le format qu’il supporte. Le résultat : des images plus légères pour la majorité des utilisateurs, sans sacrifice de compatibilité.

Optimiser le chargement avec loading= »lazy »

L’attribut loading="lazy" permet de différer le chargement des images qui ne sont pas visibles dans le viewport initial. C’est une solution rapide et efficace pour améliorer le temps de chargement perçu, sans aucune dépendance JavaScript.

<img src="photo.jpg" alt="Description" width="800" height="600" loading="lazy">

À noter : n’appliquez pas loading="lazy" à l’image principale visible au-dessus de la ligne de flottaison (souvent appelée « hero image »). Pour cette image critique, utilisez plutôt loading="eager" ou omettez simplement l’attribut.

Nommer ses fichiers images correctement

Le nom du fichier image est un signal SEO souvent négligé. Un fichier nommé IMG_20240315_093412.jpg n’apporte aucune information aux moteurs de recherche. Un fichier nommé chat-roux-sur-canape.jpg contribue à votre référencement naturel sur les recherches d’images.

Bonnes pratiques pour nommer vos images :

• Utilisez des mots descriptifs séparés par des tirets (pas des underscores ni des espaces).
• Évitez les accents et les caractères spéciaux.
• Restez concis : entre 3 et 5 mots suffisent généralement.
• Intégrez votre mot-clé naturellement si l’image s’y prête.

Pourquoi ces bonnes pratiques sont utiles

Respecter les bonnes pratiques pour les images en HTML, c’est agir sur plusieurs leviers à la fois :

• Performance : des images bien configurées réduisent le temps de chargement, améliorent les Core Web Vitals et réduisent la consommation de données sur mobile.
• Accessibilité : les textes alternatifs permettent aux personnes malvoyantes ou non-voyantes d’accéder à votre contenu via un lecteur d’écran. C’est aussi une obligation légale dans de nombreux contextes professionnels.
• SEO : les moteurs de recherche indexent les images et se basent sur l’attribut alt, le nom du fichier et le contexte environnant pour les classer dans Google Images.
• Expérience utilisateur : une page sans saut de mise en page, qui charge rapidement, crée une meilleure impression et réduit le taux de rebond.

Comment choisir la bonne approche selon votre situation

Pas toutes les images ne se traitent de la même façon. Voici un guide de décision simple :

• Image de contenu éditoriale (article, fiche produit) : utilisez WebP ou JPEG optimisé, ajoutez un alt descriptif, définissez les dimensions et activez le lazy loading.
• Logo ou icône : préférez le SVG. Léger, responsive, net à toutes les résolutions.
• Image décorative (fond, séparateur visuel) : intégrez-la en CSS via background-image plutôt qu’une balise <img>. Elle n’aura pas besoin d’attribut alt.
• Image hero (au-dessus de la ligne de flottaison) : préchargez-la avec une balise <link rel="preload"> dans le <head> pour accélérer l’affichage initial.

Récapitulatif des bonnes pratiques

Voici une liste consolidée, prête à l’emploi, pour vérifier vos intégrations d’images en HTML :

• Toujours inclure l’attribut alt, même vide pour les images décoratives.
• Spécifier width et height pour éviter le layout shift.
• Choisir le bon format : WebP en priorité, SVG pour les icônes, JPEG pour les photos si WebP n’est pas disponible.
• Utiliser <picture> pour proposer plusieurs formats et assurer la compatibilité.
• Activer le lazy loading avec loading="lazy" sur toutes les images hors viewport initial.
• Nommer les fichiers avec des mots-clés pertinents séparés par des tirets.
• Compresser les images avant l’upload (outils recommandés : Squoosh, TinyPNG, ImageOptim).
• Utiliser des images responsive avec l’attribut srcset pour servir des tailles adaptées à chaque écran.

FAQ : images en HTML

Est-ce que l’attribut alt est obligatoire ?

Oui, techniquement. La spécification HTML exige sa présence sur toute balise <img>. Pour une image décorative, la valeur doit être vide (alt=""). L’omettre complètement est une erreur de validation et d’accessibilité.

Quelle différence entre width/height en HTML et en CSS ?

Les attributs width et height en HTML indiquent au navigateur les dimensions intrinsèques de l’image dès le parsing du document, avant même que l’image soit téléchargée. Cela évite les sauts de mise en page. Le CSS, lui, gère l’affichage visuel et peut redimensionner l’image après coup. Les deux sont complémentaires et ne s’excluent pas.

Le lazy loading est-il supporté par tous les navigateurs ?

L’attribut loading="lazy" est supporté par tous les navigateurs modernes, y compris Chrome, Firefox, Edge et Safari (depuis la version 15.4). Pour les navigateurs très anciens, il est simplement ignoré : l’image se charge normalement. Aucun fallback n’est nécessaire dans la grande majorité des projets actuels.

Faut-il utiliser WebP pour toutes les images ?

WebP est le format recommandé pour la plupart des images photographiques et illustratives. Sa compatibilité navigateur est aujourd’hui excellente. Cependant, le SVG reste incontournable pour les logos et icônes, et certains contextes éditoriaux ou CMS peuvent imposer d’autres formats. L’essentiel est d’optimiser systématiquement, quel que soit le format.

Comment rendre les images responsive en HTML ?

Utilisez l’attribut srcset pour proposer plusieurs versions d’une image selon la résolution ou la taille d’écran, combiné à l’attribut sizes pour indiquer au navigateur quelle taille d’image utiliser selon le contexte d’affichage. La balise <picture> permet également de gérer des cas plus complexes (formats différents, orientation, etc.).

Les images en CSS doivent-elles aussi avoir un texte alternatif ?

Non. Les images intégrées via la propriété CSS background-image sont invisibles pour les technologies d’assistance et ne peuvent pas recevoir d’attribut alt. C’est précisément pour cette raison qu’il ne faut utiliser cette propriété que pour des images purement décoratives, sans valeur informative.

Les bonnes pratiques pour les images en HTML ne sont pas une liste de contraintes techniques abstraites. Ce sont des décisions concrètes qui ont un impact direct sur la vitesse de votre site, votre positionnement dans les moteurs de recherche et l’expérience de tous vos utilisateurs.

Commencez par les bases : un attribut alt pertinent, des dimensions définies, un format adapté et le lazy loading activé. Ces quatre ajustements suffisent déjà à améliorer sensiblement vos performances. Appliquez ce guide comme une checklist à chaque intégration d’image, et vous gagnerez du temps tout en produisant un code plus solide et plus accessible.