Guide · Images web
Images web : choisir, publier et optimiser sans perdre leur valeur éditoriale
Guide pour choisir des images originales, les adapter aux écrans, rédiger leurs alternatives et contrôler leur poids, leurs droits et leur indexation.
Réponse rapide
Une bonne image éclaire le contenu et charge vite. Le fichier, l’alternative, la taille et la page qui l’accueille travaillent ensemble.
- Choisir des visuels qui ajoutent une information ou une preuve.
- Préparer plusieurs tailles et déclarer la largeur et la hauteur.
- Écrire une alternative adaptée à la fonction de l’image.
- Vérifier les droits, le contexte de publication et les informations de licence utiles.
1. Sélectionner une image qui sert la page
Une photographie de couverture doit illustrer le sujet réel de la page. Pour un service, elle peut montrer l’environnement de travail ou une étape du processus ; pour un guide, elle peut rendre visible l’objet du conseil. Des images interchangeables rendent plusieurs pages difficiles à distinguer.
Préparez un inventaire avec l’emplacement, la fonction, le propriétaire et les variantes de chaque fichier. Un même logo peut revenir dans la navigation ; les photos éditoriales gagnent à être choisies pour leur contexte propre.
- Définir la fonction avant de chercher le fichier.
- Éviter de réutiliser la même photo comme couverture de sujets distincts.
- Vérifier les droits et l’autorisation des personnes représentées.
2. Livrer le bon nombre de pixels
Une image affichée à 400 pixels ne devrait pas imposer au mobile un fichier prévu pour un grand écran. Les attributs srcset et sizes permettent au navigateur de choisir une variante adaptée. Déclarez aussi width et height pour réserver la place avant le chargement.
Les formats modernes comme WebP réduisent souvent le poids à qualité visuelle comparable. Vérifiez le rendu après compression, surtout sur les visages, les aplats et les détails fins. L’image principale visible immédiatement peut être prioritaire ; les images plus basses sur la page peuvent être chargées plus tard.
- Créer des variantes pour les largeurs réellement affichées.
- Compresser en contrôlant visuellement la qualité.
- Réserver l’espace de chaque image dans la mise en page.
3. Décrire sans empiler les mots-clés
L’alternative textuelle transmet l’information qu’une personne manquerait si l’image n’était pas visible. Une photo informative demande une description courte et concrète ; un décor purement décoratif peut recevoir une alternative vide. Une image contenant un lien doit annoncer sa destination ou son action.
Le nom de fichier et le texte voisin apportent du contexte. Les légendes sont utiles quand elles expliquent un détail, une source ou une méthode. Évitez de répéter exactement le titre de la page dans chaque image.
- Décrire le sujet visible et sa fonction dans le passage.
- Laisser alt vide pour un élément réellement décoratif.
- Rédiger une légende quand elle ajoute une information.
4. Contrôler la découverte et les métadonnées
Les images importantes doivent avoir des URL accessibles et figurer dans des pages que les moteurs peuvent explorer. Des données structurées ou des métadonnées IPTC peuvent porter des informations de licence et de crédit lorsqu’elles sont exactes. Leur présence ne compense pas une page pauvre ou une image sans rapport avec son sujet.
Après publication, vérifiez les liens, la qualité mobile, le poids transféré et les droits. Gardez une trace du fichier source et de ses variantes afin de pouvoir corriger une image sans laisser des fichiers obsolètes dans les pages.
- Tester les URL de toutes les variantes.
- Garder crédits et droits cohérents entre fichier et page.
- Surveiller les images principales dans les mesures de performance.
Quel traitement selon le rôle du visuel ?
| Rôle | Traitement | Vérification |
|---|---|---|
| Image principale | Dimensions adaptées et priorité de chargement | Affichage mobile et LCP |
| Photo dans une carte | Variante compacte et chargement différé | Poids et alternative |
| Logo | Fichier net, proportions préservées | Identité et droits |
| Décor | Alternative vide si aucune information | Lecture sans image |
Avant d’avancer
La check-list opérationnelle
- Chaque image a une fonction identifiable.
- Les variantes affichées existent et se chargent.
- Les images informatives ont une alternative utile.
- Les dimensions réservent l’espace nécessaire.
- Les crédits et les droits correspondent aux fichiers publiés.
Questions fréquentes
Les précisions à connaître
Faut-il ajouter des mots-clés dans les métadonnées EXIF ?
Les métadonnées peuvent documenter le crédit et les droits, mais elles ne remplacent pas le contexte de la page, le texte alternatif et une image pertinente. Les mots-clés répétés artificiellement n’apportent pas de valeur.
Une image peut-elle servir sur plusieurs pages ?
Oui quand elle représente le même élément, comme un logo. Pour des couvertures de sujets différents, une image propre à chaque page aide davantage les lecteurs à les distinguer.
Documentation
Sources de référence
Ces ressources officielles complètent les arbitrages et permettent de vérifier les recommandations dans leur contexte.
