Temps de lecture estimé : 9 min
Contrôler une image dans son emplacement réel
Un fichier peut être utilisable et devenir trompeur après recadrage, ou trop lourd pour la place qu’il occupe. Vérifiez ensemble le sens, les droits, le cadre et les variantes servies.
- Source et droits
Identifier l’auteur, l’autorisation et la nature réelle ou illustrative.
- Rôle dans la page
Déterminer l’information que l’image apporte au lecteur.
- Cadre affiché
Examiner le sujet conservé sur téléphone et sur grand écran.
- Version servie
Vérifier dimensions, poids et alternative dans le contexte publié.
Scénarios pédagogiques fictifs à adapter à votre système. Cette page n’effectue aucune opération sur votre site.
Ouvrir la situation à vérifier
Le sujet important disparaît dans une carte
- Ce que l’on sait
- Le recadrage a modifié ce que le lecteur peut observer.
- La vérification suivante
- Adapter le point de cadrage, le format ou la sélection du visuel ; vérifier chaque emplacement au lieu de valider seulement le fichier source.
La photo est décorative dans cet emplacement
- Ce que l’on sait
- Elle ne fournit pas nécessairement une information supplémentaire.
- La vérification suivante
- Choisir l’alternative selon ce rôle précis. Une même image peut être informative dans une autre page.
Une scène générée ressemble à une réalisation
- Ce que l’on sait
- Le rendu visuel ne prouve pas qu’une intervention ou un lieu existe.
- La vérification suivante
- Signaler la nature illustrative et utiliser une photographie documentée lorsque la page doit montrer un travail effectivement réalisé.
La photo change, mais son alternative reste ancienne
- Ce que l’on sait
- La galerie fictive passe de la référence DEMO-1 à DEMO-2 ; l’alternative décrit encore le premier produit.
- La vérification suivante
- Contrôler ensemble l’image, sa légende, son alternative et l’éventuel lien après le changement. Un téléchargement réussi ne démontre pas que ces informations restent cohérentes.
- Trace à conserver
- Références DEMO-1 et DEMO-2, textes avant/après et rôle de l’image dans l’emplacement testé.
Référence technique : W3C WAI · Images · Consultée le .
Faire un inventaire par emplacement
Parcourez le site comme un visiteur : accueil, pages services, articles, listes, cartes, témoignages et réseaux sociaux. Pour chaque emplacement, notez la taille affichée, le sujet attendu, le fichier actuel, son responsable et son statut. Les trous dans une page interne ou un slider se voient mieux dans cet inventaire que dans un dossier rempli de fichiers.
Marquez les répétitions visibles dans une même liste et les images génériques utilisées pour des sujets différents. Une photo réutilisée sur plusieurs traductions d’une même page peut rester cohérente ; une série de cartes censée comparer des activités demande généralement des visuels distincts.
- Emplacement et rôle de l’image.
- Sujet précis et lien avec le texte voisin.
- Droits, crédit, version et statut de validation.
Préparer une liste de prises de vue
Pour chaque page prioritaire, écrivez une courte scène à photographier : qui ou quoi, dans quel contexte, quel geste ou détail, et quelle orientation. Prévoyez un cadrage assez large pour les adaptations mobile et un sujet placé hors des zones où le texte sera superposé. Une séance peut fournir un portrait, une situation de travail, un détail de matière et une vue de lieu sans recycler le même cadrage partout.
Si une photo doit être créée ou obtenue auprès d’un tiers, vérifiez l’autorisation de publication, le périmètre d’usage et les personnes identifiables. Ne présentez jamais une scène illustrative comme une réalisation ou une équipe réelle si ce n’est pas le cas.
- Photo principale spécifique à la page.
- Visuels complémentaires pour les cartes et les étapes.
- Version horizontale ou verticale selon les composants.
Optimiser sans effacer les informations utiles
Conservez une source de bonne qualité, puis exportez des variantes adaptées aux tailles réellement affichées. WebP ou AVIF conviennent souvent aux photos ; le navigateur ne devrait pas télécharger une image de grande taille pour une petite carte. Déclarez largeur et hauteur pour éviter les décalages, et chargez prioritairement l’image principale visible dès l’ouverture.
Un nom de fichier court et descriptif, un texte alternatif adapté au contexte et une légende lorsque nécessaire sont plus utiles pour la compréhension qu’une accumulation de mots-clés EXIF. Selon Google Search Central, le texte alternatif est le signal descriptif le plus important. Les crédits et droits ne doivent toutefois pas disparaître sans examen : Google peut aussi lire les métadonnées IPTC ou les données structurées de licence.
Exercice fictif : une source de 1 600 × 900 pixels est placée dans un cadre carré de 480 × 480 pixels CSS, avec un alignement centré. Avec contain, l’image entière occupe 480 × 270 pixels et laisse 105 pixels de bande en haut et en bas. Avec cover, le cadre montre une zone centrale de 900 × 900 pixels de la source, soit 56,25 % de sa largeur.
cover remplit le cadre en conservant les proportions, au prix d’une coupe ; fill peut déformer l’image. object-position déplace la zone conservée sans changer ces proportions. Si le détail décisif reste hors champ, préparez un cadrage adapté, éventuellement choisi avec picture. Relisez aussi l’alternative : elle ne doit pas décrire un détail devenu invisible.
- Variantes responsive, poids vérifié et dimensions HTML.
- Alt qui décrit la fonction de l’image, ou alt vide si elle est décorative.
- Crédits et informations de droits cohérents avec l’usage autorisé.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Réglage | Résultat géométrique | Vérification éditoriale |
|---|---|---|
| contain | Image de 480 × 270 px ; deux bandes de 105 px | Le sujet complet reste visible, avec de l’espace libre |
| cover centré | Zone source de 900 × 900 px ; 56,25 % de la largeur conservée | Le détail utile ne doit pas disparaître sur les côtés |
| fill | Source entière étirée sur 480 × 480 px | Contrôler les proportions des visages, objets et cercles |
Contrôler la publication réelle
Ouvrez chaque page sur téléphone et ordinateur. Vérifiez le recadrage, la netteté, les zones de texte, les fonds sombres, les erreurs de chargement et la cohérence entre les images des cartes et leurs destinations. Dans les résultats de partage, l’image choisie doit représenter la page et rester lisible dans un recadrage plus court.
Mettez à jour l’inventaire après chaque changement de service ou de campagne. Il évite de republier une image retirée, de perdre son crédit ou de laisser une page sans photo principale. Le contrôle avant mise en ligne reprend cette vérification dans l’ensemble du parcours.
Choisir selon le rôle du visuel
Une photo demande une compression maîtrisée ; un schéma peut rester vectoriel pour conserver ses détails. Fournissez des variantes adaptées à la largeur affichée et inspectez le fichier téléchargé sur mobile. Un format moderne ne corrige pas une image inutilement grande ni un cadrage qui coupe le sujet.
Conservez source, auteur, licence et conditions d’attribution des photos tierces. Une photo générée illustre un sujet : elle ne prouve ni un établissement, ni une équipe, ni un chantier. L’alternative décrit l’information utile ; provenance et crédit se placent dans le texte visible associé.
Vérifier le recadrage utile
Cas proposé : la photo d’un produit est correcte sur ordinateur, mais le détail qui distingue sa variante disparaît sur téléphone. Le fichier existe ; sa fonction n’est plus remplie.
Comparez l’original et les emplacements réellement affichés. Gardez une capture par format avec sujet visible, texte alternatif et variante choisie ; ne concluez pas à partir du seul poids du fichier.
- Identifier le détail indispensable
- Comparer carte et page de détail
- Conserver les captures aux tailles testées
- Comparer des conditions de chargement
Améliorer la performance d’un site page par page
Estimer la largeur d’une variante sans envoyer l’original partout
Pour une image matricielle, multipliez la largeur affichée en pixels CSS par la densité visée pour obtenir une largeur de fichier indicative. Les calculs ci-dessous supposent une source assez grande et le même cadrage. Agrandir un petit original ne recrée pas les détails manquants.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Emplacement fictif | Calcul | Variante indicative |
|---|---|---|
| Carte de 360 pixels CSS, densité 2 | 360 × 2 | 720 pixels de large. |
| Illustration de 600 pixels CSS, densité 1 | 600 × 1 | 600 pixels de large. |
| Même illustration, densité 2 | 600 × 2 | 1 200 pixels de large. |
- WHATWG · HTML · Images
Ce calcul aide à préparer les candidats ; il ne prédit pas à lui seul le fichier choisi par le navigateur. Vérifiez srcset, sizes, le fichier réellement chargé et le recadrage. Le standard HTML distingue densité, largeur d’affichage et direction artistique.
Documents de référence
- W3C WAI · Images
- web.dev : images responsive
- W3C WAI : texte alternatif · Source consultée
- Google Search Central · Source consultée
- MDN : Responsive images · Source consultée
- WHATWG · HTML · Images · Source consultée
- MDN : object-fit · Source consultée
- métadonnées IPTC ou les données structurées de licence
Contenu mis à jour le
