Une image utile aide le visiteur à comprendre un produit, un service ou une consigne. Sa préparation dépasse la retouche : le cadrage doit convenir aux écrans, le fichier doit être adapté à la diffusion et l’information essentielle doit rester accessible aux personnes qui ne voient pas l’image. Suivez cette démarche pour ajouter une image ou en remplacer une.
1. Conserver l’original et définir le rôle
Gardez un fichier maître intact et créez une version destinée au Web. Précisez où l’image apparaîtra, ce qu’elle doit communiquer et si elle informe ou décore. Utilisez du contenu que vous pouvez publier. Avant de téléverser une capture d’écran, vérifiez qu’elle ne révèle pas de renseignements clients, de données de compte ou d’autres éléments involontaires.
Pour une page existante, notez l’image actuelle, son texte alternatif, sa légende éventuelle et les autres endroits utilisant le fichier. Remplacer un média partagé peut modifier plusieurs pages. Commencez par une page représentative et gardez un moyen de rétablir sa version précédente.
2. Recadrer pour la disposition et redimensionner pour l’écran
Recadrez en gardant le sujet utile visible à l’endroit prévu. Vérifiez une disposition large sur ordinateur et une disposition étroite sur téléphone, surtout si la bannière change de proportions. Évitez d’intégrer des mots essentiels dans une photo : le texte de la page se redimensionne et se traduit plus facilement.
Les dimensions en pixels représentent le détail visuel disponible; le poids du fichier représente les données transférées. Réduire la largeur affichée dans l’éditeur ne diminue pas nécessairement le téléchargement. Générez des fichiers de dimensions adaptées plutôt que de servir partout l’original de l’appareil photo. Les images adaptatives peuvent proposer plusieurs tailles avec srcset et sizes; picture permet différents cadrages ou formats. Le développeur ou la configuration du CMS doit adapter ces choix à la disposition.
3. Choisir un format et comparer l’exportation
Consultez le guide des formats d’images de MDN et les formats acceptés par vos outils. WebP ou AVIF peuvent convenir aux photos. JPEG reste un format photographique courant; PNG est utile pour des détails sans perte ou de la transparence. SVG convient aux dessins vectoriels, notamment les icônes et les schémas. Aucun format ni réglage de qualité ne convient à toutes les images.
Comparez les exportations à leur taille d’affichage prévue. Repérez les lettres floues, les contours dégradés, les halos et les changements de couleur indésirables. Choisissez un équilibre entre détail acceptable et fichier plus léger, avec une solution de repli compatible lorsque le public du site l’exige. Changer l’extension ne convertit pas le fichier. Évitez de retoucher et de réenregistrer plusieurs fois une copie déjà compressée.
4. Adapter le texte alternatif à l’utilisation
L’arbre de décision du W3C pour le texte alternatif recommande des alternatives selon leur rôle. Décrivez l’information apportée par une image informative. Pour une image cliquable, indiquez sa destination ou sa fonction. Utilisez alt="" pour une décoration pure; ne remplacez pas cette valeur vide par l’absence de l’attribut. Rendez aussi l’information d’un graphique complexe disponible en texte accessible. Une légende apporte du contexte visible, mais ne remplace pas automatiquement une alternative appropriée.
Rédigez l’alternative dans la langue de la page et révisez les deux versions linguistiques. Choisissez des noms de fichiers clairs pour la maintenance, sans renseignements privés. Évitez d’accumuler des mots-clés dans les noms, légendes ou alternatives. Vérifiez aussi qu’un nouveau cadrage ne demande pas une nouvelle description.
5. Réserver l’espace et choisir le moment du chargement
Demandez au développeur ou au responsable du site de préserver les proportions et de réserver l’espace de l’image. Des attributs width et height corrects aident le navigateur à calculer son rapport de dimensions avant son arrivée. Le style adaptatif doit permettre à l’image de tenir dans son conteneur.
Le chargement différé peut reporter les images situées sous l’écran initial. Évitez de l’appliquer systématiquement à l’image principale nécessaire immédiatement, particulièrement celle mesurée par Largest Contentful Paint. Examinez le fonctionnement du thème et des extensions avant d’ajouter une autre optimisation. Des réglages qui se chevauchent peuvent compliquer le diagnostic d’une image absente ou tardive.
6. Vérifier le résultat publié
- Ouvrez la page sur téléphone et ordinateur. Confirmez le cadrage, la netteté, les proportions et le texte voisin.
- Vérifiez les pages française et anglaise, les alternatives, les légendes et les liens des images.
- Rechargez avec une connexion plus lente et repérez les déplacements tardifs du contenu ou une image principale inutilement retardée.
- Si l’ancienne image persiste, vérifiez le fichier publié et les références de la page, puis actualisez uniquement le cache concerné selon la procédure habituelle du site.
- Si une image manque, vérifiez son URL, la casse du nom, son format réel et sa publication. Transmettez la page et l’erreur observée au développeur.
Comparez le fichier réellement livré et le comportement de la page avant et après. Un téléversement plus léger ne prouve pas à lui seul que la page est plus rapide. Ces observations vous aideront à conserver la modification ou à ajuster l’exportation.
Pour des problèmes répétés de cadrage, des tailles adaptatives manquantes ou une intégration au thème, consultez les services de développement Web de Nuagerie. Communiquez avec nous en précisant la page, l’appareil et le résultat attendu afin de définir la prochaine étape.
