Temps de lecture estimé : 5 min · Publié le
Lister les emplacements avant les prises de vue
Passez en revue l’accueil, les pages service, l’équipe, les réalisations, les cartes et les articles. Notez pour chaque emplacement le sujet, l’orientation, le cadrage, l’espace nécessaire au texte et la priorité. Une image horizontale de bannière ne remplace pas automatiquement un portrait ou une vignette carrée.
Prévoyez plusieurs sujets réellement différents : gestes de travail, environnement, produits, équipe et détails utiles. Une même photo reproduite sur toutes les pages affaiblit la compréhension. Le guide de choix des images aide à relier chaque visuel à l’information de la page.
- Liste des pages et formats établie.
- Sujet et cadrage définis par emplacement.
- Variantes prévues pour les cartes et les mobiles.
Préparer les lieux et les personnes
Choisissez des situations représentatives et vérifiez ce qui apparaît dans le cadre : écrans, étiquettes, documents et personnes. Exemple fictif : une photo d’atelier montre un devis client sur un établi ; préparez une scène équivalente sans information confidentielle avant la prise de vue. Planifiez lumière, disponibilité des personnes et rangement utile, sans transformer le lieu en décor impossible à reconnaître.
Identifiez les personnes reconnaissables, les lieux privés et les marques de tiers. Convenez des usages envisagés avec le photographe et les personnes concernées avant la prise de vue. Pour chaque image retenue, gardez la trace des autorisations, des crédits requis et des restrictions éventuelles.
- Écrans et documents vérifiés.
- Usages et droits clarifiés.
- Temps prévu pour des scènes réelles.
Sélectionner et adapter les fichiers
Triez les clichés selon leur netteté, leur authenticité et leur utilité. Conservez des originaux de qualité hors du site, puis exportez des versions web aux dimensions adaptées. Un format moderne et plusieurs tailles évitent de charger la même image lourde sur téléphone et sur grand écran.
Nommez les fichiers selon leur sujet réel, écrivez un texte alternatif qui transmet l’information utile et rédigez une légende si le contexte mérite d’être précisé. Les recommandations Google Images mettent l’accent sur la page, le nom de fichier et le texte alternatif ; des métadonnées de droits peuvent compléter ces éléments sans les remplacer.
Exemple fictif : une enveloppe accompagne un lien déjà nommé « Contact ». Si elle n’ajoute aucune information, alt="" évite de répéter le même nom. Si cette image est au contraire le seul contenu du lien et qu’aucun autre nom accessible n’est fourni, son alternative doit exprimer la destination, « Contact », plutôt que décrire seulement une enveloppe. Le schéma compare ces deux usages. Une alternative vide et un attribut alt absent sont différents : l’absence peut laisser annoncer le nom du fichier ou sa destination de façon peu utile.
Le choix dépend de la fonction dans chaque page, pas seulement du fichier photographique. Pour une vue informative montrant un détail d’un produit, décrivez le détail utile ; pour une décoration sans information propre, utilisez une alternative vide. Une image complexe demande aussi un équivalent dans le contenu de la page. L’arbre de décision W3C distingue ces cas. Préparez l’alternative lors de la sélection, traduisez-la selon le contexte et testez le nom complet des liens et boutons. La légende peut apporter un lieu, une date ou un crédit, sans transformer l’alternative en liste de mots-clés.
- Originaux conservés séparément.
- Exports adaptés aux écrans.
- Nom, alternative et éventuelle légende descriptifs.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Usage fictif | Alternative à préparer | Contrôle du contexte |
|---|---|---|
| Enveloppe ajoutée à un lien déjà nommé Contact | alt="" | Le nom visible suffit et aucune information n’est ajoutée |
| Enveloppe seule dans un lien sans autre nom | alt="Contact" | La destination est nommée, pas seulement la forme de l’icône |
| Détail informatif d’un produit | Description brève du détail utile | Le lecteur retrouve la même information sans percevoir l’image |
| Décoration sans information propre | alt="" | L’image ne porte pas d’information indispensable |
Vérifier le résultat dans les pages
Placez les images dans leurs vrais gabarits avant de valider la sélection. Exemple fictif : un portrait fonctionne en carré mais perd le visage dans une bannière horizontale ; retenez une autre prise ou une variante cadrée pour cet emplacement. Vérifiez téléphone, tablette, texte superposé et détail visible en petit. Une image techniquement nette ne convient pas nécessairement à tous les usages.
Testez la vitesse de chargement, les images manquantes et le comportement sans image. Tenez un inventaire associant fichier, page, droit et date de revue : il facilitera les futures corrections et les traductions. Le guide de performance propose les vérifications utiles après publication.
- Cadrage validé à plusieurs largeurs.
- Poids et affichage contrôlés.
- Droits et emplacements consignés.
Documents de référence
- Unsplash : Licence / License · Source consultée
- W3C WAI : An alt Decision Tree · Source consultée
- W3C WAI : Functional Images · Source consultée
- recommandations Google Images · Source consultée
Contenu mis à jour le
