Images web : formats, dimensions et texte alternatif

Une image web est prête lorsqu’elle a un objectif clair, une autorisation d’utilisation, un cadrage adapté, un fichier efficace et une alternative textuelle correspondant à son rôle. Le fichier le plus léger n’est pas toujours le meilleur choix : les visiteurs doivent encore pouvoir reconnaître un produit, lire un schéma ou comprendre le propos d’une illustration. Vérifiez l’image dans sa page réelle avant de la valider.

Utilisez cette checklist pour préparer un nouveau site, remplacer une bannière trop lourde ou transmettre un dossier de visuels à une équipe de développement. Commencez par une image représentative, validez les choix, puis appliquez la démarche aux autres. Conservez l’original séparément afin qu’une future refonte ne dépende pas d’un export déjà compressé.

1. Déterminez ce que l’image doit communiquer

Décrivez en une phrase le rôle de chaque image. Une photographie de produit peut montrer une finition ; un schéma peut expliquer une succession d’étapes ; une texture décorative peut simplement contribuer à l’ambiance de la page. Si personne ne sait expliquer ce rôle, demandez-vous si le téléchargement de l’image est justifié. Alléger une page peut aussi consister à supprimer une image inutile, plutôt qu’à compresser davantage toutes celles qui existent.

Conservez avec le fichier original sa source, son auteur ou fournisseur, les utilisations autorisées et les éventuelles mentions obligatoires. Vérifiez que l’autorisation couvre l’usage prévu sur le site ainsi que les retouches ou recadrages. Le simple fait de recevoir un fichier par e-mail ne règle pas ces questions. En cas d’incertitude, adressez-vous au titulaire des droits ou à un conseiller qualifié. Il s’agit d’une vérification de la gestion des visuels, pas d’un conseil juridique.

Pour les illustrations conceptuelles générées, conservez le prompt et la trace de génération, et présentez honnêtement leur rôle. Ne faites pas passer un espace de travail, une équipe ou un produit imaginaires pour une photographie de l’entreprise. Supprimez les données personnelles inutiles des captures d’écran et vérifiez l’export final, y compris ce qui apparaît dans les onglets du navigateur ou les espaces de compte.

2. Choisissez un format adapté au contenu

Choisissez un premier format, exportez une version, puis comparez-la à l’original à la taille où elle sera affichée. Les mêmes réglages d’encodage ne produisent pas les mêmes résultats sur toutes les images. Aucun niveau de qualité ni aucune extension de fichier ne rendent automatiquement tous les visuels prêts à publier.

• Photographies et illustrations détaillées : comparez WebP ou AVIF à un JPEG bien encodé. Retenez la version qui préserve les détails importants avec un poids de transfert acceptable.
• Logos et schémas simples : envisagez SVG lorsqu’un original vectoriel fiable est disponible. Vérifiez le fichier SVG fourni avant de l’ajouter au site et gardez les textes essentiels accessibles dans la page.
• Visuels matriciels exigeant des contours précis ou de la transparence : comparez PNG à un export WebP sans perte ou transparent adapté. Examinez les traits fins, les caractères et les bords translucides sur le véritable fond de la page.
• Visuels animés : demandez-vous d’abord si le mouvement apporte une information. Une image fixe peut transmettre la même idée avec moins de distractions et une mise en ligne plus simple.

Ce sont des pistes de comparaison, pas une obligation de produire chaque format. Toute variante supplémentaire doit avoir une raison d’être et un mécanisme de diffusion opérationnel. Un fichier AVIF inutilisé à côté du JPEG publié n’améliore rien. Notez les réglages d’export dans la fiche du visuel pour qu’une autre personne puisse reproduire une correction sans tâtonner.

3. Adaptez les dimensions à la mise en page

Distinguez les dimensions de la source, les dimensions affichées et le cadrage. Une photographie peut contenir des milliers de pixels tout en apparaissant dans une petite carte. Fournir l’original complet de l’appareil photo pour chaque carte augmente inutilement les transferts sans forcément rendre la carte plus utile. À l’inverse, étirer un petit export sur une grande surface révèle son manque de netteté.

Le balisage des images responsives peut proposer plusieurs largeurs grâce à srcset, tandis que sizes décrit la largeur attendue dans la mise en page. Le navigateur choisit une ressource en fonction de ces informations et de son environnement. Utilisez picture lorsque la composition doit changer, par exemple pour un cadrage mobile plus serré. MDN explique la différence entre changement de résolution et direction artistique dans son guide des images responsives.

Pour la vérification, répertoriez les emplacements réels : bannière pleine largeur, image dans un contenu à deux colonnes, carte et aperçu sur les réseaux sociaux. Testez un téléphone étroit et un grand écran. Éloignez le sujet des bords susceptibles de disparaître au recadrage. Si un visage, une étiquette ou un détail essentiel est coupé, modifier la compression ne résoudra pas le problème : changez le cadrage ou la mise en page.

Définissez des attributs width et height appropriés pour que le navigateur réserve de l’espace à partir du rapport largeur/hauteur. Vérifiez que le CSS responsive et les éventuels autres cadrages correspondent à cet espace réservé. Testez le chargement initial autant que la page entièrement chargée : une capture stable peut masquer un déplacement survenu quelques instants plus tôt.

4. Compressez sans perdre la raison d’être de l’image

Comparez les exports côte à côte à leur taille d’affichage prévue. Recherchez des bandes dans les dégradés, des halos autour des contours fins, des détails brouillés et des franges inattendues dans les zones transparentes. Pour les images de produits, assurez-vous qu’une texture ou une différence de couleur n’a pas disparu. Le compromis acceptable dépend de ce que le visiteur doit comprendre.

Convenez d’un budget de poids indicatif pour chaque emplacement, puis examinez les exceptions. Une image explicative détaillée peut mériter davantage d’octets qu’une carte décorative. Le budget doit susciter une discussion utile sur le format, le cadrage et les dimensions. Il ne doit ni imposer un résultat illisible, ni devenir une règle universelle inventée comme « toutes les images doivent peser moins de 100 Ko ».

Mesurez le fichier que reçoit réellement le navigateur. Un système de gestion de contenu peut recompresser un fichier téléversé, diffuser une variante inattendue ou conserver une ancienne image en cache. Après publication, inspectez la page affichée et la réponse réseau. Gardez un original validé et des exports clairement nommés, plutôt que de réenregistrer à répétition une image déjà compressée avec une nouvelle compression avec perte.

5. Rédigez le texte alternatif selon le rôle de l’image

Partez du contenu environnant. Les images informatives ont besoin d’une alternative textuelle qui transmet leur signification utile ; les images décoratives utilisent généralement un attribut vide alt="". Si une image fournit le nom accessible d’un lien ou d’un bouton, décrivez son action ou sa destination. Les schémas complexes nécessitent une explication plus complète à proximité. L’arbre de décision du W3C pour le texte alternatif aide à distinguer ces situations.

Par exemple, un gros plan sur une page consacrée aux matériaux pourrait être décrit par « Poignée en laiton brossé à bord arrondi ». Une icône liée à un téléchargement doit indiquer l’objet du téléchargement, pas décrire la flèche. Une lueur décorative derrière un titre ne devrait pas annoncer « fond lumineux bleu » à chaque utilisateur de lecteur d’écran. La même image peut nécessiter une autre alternative sur une autre page parce que son rôle a changé.

Écrivez de façon concise et naturelle, en ajoutant des détails uniquement s’ils aident à remplacer l’information visuelle pertinente. Ne remplissez pas l’attribut de mots-clés commerciaux. Vérifiez si une légende ou un paragraphe voisin dit déjà la même chose et évitez les répétitions inutiles à la lecture. Traduisez les alternatives avec la page, en tenant compte des changements de sens liés aux libellés ou aux captures localisés.

Examinez la page lorsque les images sont indisponibles et inspectez les noms accessibles des images servant de liens. Cela permet de repérer des informations manquantes ou des annonces répétées qu’une vérification visuelle peut laisser passer. Les contrôles automatisés peuvent signaler l’absence d’un attribut, mais ils ne savent pas juger de manière fiable si une phrase décrit la bonne information.

6. Chargez l’image importante au bon moment

L’image principale visible à l’arrivée sur la page ne doit pas être retardée par le chargement différé. Les images situées plus bas peuvent utiliser loading="lazy". Réservez également leur espace. Les recommandations de web.dev sur le chargement différé expliquent pourquoi les images visibles dès le départ doivent être traitées différemment de celles qui se trouvent hors de la zone initialement affichée.

Vérifiez quelle image devient effectivement le plus grand élément visible de la page. Une grande bannière décorative peut concurrencer le titre et le contenu utile. Si l’image principale est susceptible d’être l’image du Largest Contentful Paint, rendez-la détectable tôt et évaluez l’intérêt d’une priorité de récupération élevée. Accorder une priorité élevée à toutes les images supprime cette distinction utile.

Testez avec un nouveau chargement et une connexion limitée, puis faites défiler toute la page. Recherchez les espaces qui restent vides, les déplacements visibles du contenu et les téléchargements beaucoup plus volumineux que ne l’exige leur taille d’affichage. Considérez un audit de performance local comme une observation de la page et de la configuration testées, pas comme une promesse valable pour la connexion ou l’appareil de chaque visiteur.

7. Utilisez une fiche de décision avant l’export

Conservez cette courte fiche dans le dossier des visuels. Elle relie une décision visuelle à un contrôle de mise en œuvre et fournit à la prochaine personne chargée des modifications quelque chose de plus utile qu’un nom de fichier se terminant par « final ». Remplissez une ligne par rôle lorsque le même original apparaît à plusieurs endroits.

Prenons l’exemple hypothétique d’une boutique de céramique préparant une photographie de bol pour une fiche produit. L’original validé mesure 4000 pixels de large. L’équipe vérifie l’emplacement réel sur la fiche, exporte deux largeurs utiles, compare JPEG et WebP et choisit la version qui préserve les détails de l’émail. Le cadrage sur téléphone garde le bord du bol visible. L’alternative décrit la finition pertinente ; le texte du produit voisin contient les dimensions et les conseils d’entretien.

Cet exemple illustre une démarche de décision, pas une recette d’export imposée ni un résultat obtenu pour un client. Un gros plan de texture, un schéma de dimensions et un visuel décoratif de campagne conduiraient à des choix différents. Notez la raison d’une exception pour éviter qu’une prochaine mise à jour ne l’annule.

8. Vérifiez la découverte des images et la page finale

Utilisez des éléments d’image standards pour les contenus porteurs de sens, fournissez un src de repli fonctionnel et laissez les URL des images accessibles aux robots lorsque leur découverte est souhaitée. Employez des noms de fichiers descriptifs et placez les images près de textes pertinents. Les recommandations de Google pour le référencement des images expliquent ces pratiques et précisent que Google n’indexe pas les images de fond CSS. Ces contrôles favorisent la découverte, sans garantir l’indexation ni le classement.

• Confirmez l’image validée, le cadrage et l’alternative dans chaque langue publiée.
• Vérifiez le fichier responsive sélectionné, les dimensions intrinsèques et le comportement de chargement.
• Parcourez les liens d’images au clavier et vérifiez que leurs noms sont compréhensibles.
• Inspectez séparément l’aperçu sur les réseaux sociaux ; il peut utiliser un cadrage et un fichier différents.
• Gardez l’original, les réglages d’export et la trace d’autorisation disponibles pour la prochaine mise à jour.

Si la préparation des images s’inscrit dans un projet web plus large, consultez le service de création de sites de Digital Studio et indiquez les fichiers existants ainsi que les visuels manquants dans votre brief web. Une liste claire permet de démarrer le projet avec des décisions concrètes sur ce qu’il faut conserver, remplacer ou créer.