Publier des images web utiles, accessibles et légères
Une bonne image explique ou montre quelque chose que le texte seul transmet moins bien. Sa qualité dépend autant de sa pertinence et de ses droits que de son format, de son poids et de la manière dont elle est présentée aux personnes et aux moteurs de recherche.
Les points à retenir
Choisissez chaque image pour son rôle, ses droits et son apport au lecteur. Préparez des variantes adaptées aux écrans, intégrez les visuels importants en HTML avec des dimensions, puis écrivez des alternatives selon leur contexte. Contrôlez enfin le rendu mobile, les doublons et le poids transféré.
Choisissez l’image pour son rôle dans la page
Une photo principale doit représenter le sujet de la page. Une image de carte doit aider à reconnaître le contenu auquel elle mène. Une capture d’écran doit montrer l’étape ou l’état réellement expliqué. Écartez les visuels génériques qui pourraient illustrer indifféremment plusieurs sujets.
Quand plusieurs pages traitent de thèmes voisins, donnez-leur des images principales distinctes. Une variante de taille du même fichier convient aux différents écrans d’une même page ; elle n’est pas une nouvelle illustration pour une autre page. Préparez un cadrage qui conserve le sujet important sur mobile.
Préparez des fichiers adaptés à leur affichage
Exportez une largeur proche de l’usage réel, avec une variante plus petite pour les écrans étroits. Comparez le rendu à taille d’affichage avant de réduire davantage la qualité. WebP et AVIF peuvent limiter le transfert, mais le bon choix dépend de l’image, de la compatibilité attendue et du résultat visuel.
Utilisez un nom de fichier court et descriptif. Conservez dans votre registre éditorial le sujet, l’auteur ou la licence, la date de contrôle et les éventuelles restrictions. Les métadonnées intégrées peuvent aider à gérer l’actif, mais elles peuvent être supprimées par une chaîne de traitement ; ne leur confiez pas une information indispensable au lecteur.
Rendez l’image découvrable sans ralentir la page
Placez l’image importante dans une balise img, éventuellement dans picture, avec une URL de repli dans src. Les moteurs ne traitent pas une image de fond CSS de la même manière. Déclarez largeur et hauteur pour réserver sa place et éviter un déplacement du contenu.
Chargez rapidement l’image principale visible au premier écran ; réservez le chargement différé aux images plus bas dans la page. Vérifiez que la version mobile choisie reste lisible et que les variantes sont effectivement servies. Un sitemap d’images peut compléter la découverte, sans remplacer les liens et le contenu de la page.
Écrivez une alternative adaptée au contexte
Le texte alternatif transmet l’information utile de l’image, pas un inventaire de mots-clés. Pour une photo éditoriale, décrivez brièvement ce qui éclaire le sujet. Pour une image qui sert de lien, indiquez la destination ou l’action si le texte voisin ne le fait pas déjà. Une image décorative utilise une alternative vide.
Placez l’image près du passage qu’elle complète. Une légende peut apporter le contexte, la méthode ou la source qu’une alternative courte ne peut pas porter. Vérifiez aussi le titre de la page, sa description et la cohérence entre le visuel, le partage social et les données structurées visibles.
Vérifiez la provenance et les autorisations
Avant publication, identifiez la source, le titulaire des droits et les usages permis. Une image trouvée en ligne ne devient pas réutilisable parce qu’elle est indexée. En présence de personnes identifiables, contrôlez les autorisations adaptées au contexte. Notez les crédits requis là où le lecteur peut les voir.
Pour un logo tiers, privilégiez un fichier officiel et vérifiez qu’il correspond bien à l’organisation citée. Ne redessinez pas une marque approximative et ne présentez pas un pictogramme neutre comme un logo officiel. Revoyez ces actifs lorsque l’identité de l’organisation change.
Contrôlez le rendu et la maintenance
Ouvrez les pages clés sur un grand et un petit écran, puis vérifiez les images de tête, les listes et les cartes. Cherchez les fichiers absents, les recadrages trompeurs, les doublons non justifiés et les alternatives manquantes. Contrôlez aussi les dimensions, le poids transféré et l’absence de déplacement pendant le chargement.
Après publication, suivez les pages et images consultées dans les outils adaptés, mais reliez les observations à l’objectif de la page. Une image indexée sans visite utile ou une page rapide dont le visuel induit en erreur ne constitue pas un résultat satisfaisant.
Pour approfondir
Références officielles
Guides complémentaires
Un guide publié par French Digital Society. Consulter notre démarche éditoriale. Signaler une erreur ou une référence dépassée.