Décrire le défaut avant de remplacer la photographie
Imaginons un reportage fictif sur la réouverture d’une bibliothèque. L’image principale montre la façade, une rampe d’accès et plusieurs visiteurs. Dans l’article mobile, seule la partie centrale est visible : la rampe disparaît alors qu’elle fait l’objet du paragraphe d’introduction. Le problème est éditorial avant d’être esthétique. L’image ne montre plus ce que le texte annonce.
Un autre défaut peut produire une impression voisine : la photographie entière apparaît, mais les détails sont flous. Dans ce cas, le cadrage est correct et la définition disponible doit être examinée. Une troisième situation concerne une image nette qui arrive tard. Ces trois observations appellent des recherches différentes ; les réunir sous « mauvaise qualité mobile » rend le diagnostic moins utile.
Une capture accompagnée de l’adresse de l’article rend déjà le signalement exploitable. Il reste à indiquer sur quel téléphone ou à quelle largeur de fenêtre le défaut apparaît. Pour un chargement lent, l’heure et le type de connexion donnent aussi un contexte. Ces informations permettent au collègue qui reprend le problème de refaire l’essai au lieu de chercher au hasard parmi les images de la page.
Avant toute modification, il est utile de regarder une autre page qui emploie la même image. Si la photo est correcte dans l’article mais coupée dans la carte de rubrique, le défaut semble lié à cette présentation particulière. Ce constat oriente la recherche sans en établir la cause. Il évite surtout de remplacer un fichier dont plusieurs usages fonctionnent déjà.
Vérifier ce que le recadrage fait à l’information
Un cadrage adapté à une carte horizontale peut échouer dans une zone verticale. Le sujet principal, une inscription ou un élément de contexte se retrouve hors du cadre. Dans le reportage fictif, une photo agréable de la façade ne suffit plus si le lecteur doit voir la rampe. L’équipe doit nommer les éléments qui doivent rester visibles avant de discuter du format.
La documentation du bloc Image de WordPress décrit les réglages de ratio et les comportements qui ajustent l’image dans son espace, notamment le recadrage pour remplir une zone. Ce mécanisme explique pourquoi une image peut être complète dans la médiathèque et partielle dans la page. Il faut contrôler l’affichage final, car le thème peut aussi définir ses propres présentations.
Pour certaines photographies, un seul cadrage convient aux différentes largeurs. Pour d’autres, un cadrage spécifique au mobile peut être nécessaire. C’est un choix à discuter avec la personne qui gère les images du site. La rédaction fournit alors le cadre validé et la raison du choix, plutôt qu’une consigne générale comme « recentrer automatiquement les visages ».
Une photographie documentaire demande de conserver le contexte utile. Rapprocher un détail peut aider à le comprendre, mais peut aussi faire disparaître un élément qui nuance la scène. La relecture du cadrage doit donc revenir à l’image entière et à sa légende. Une décision de mise en page n’autorise pas à modifier le sens de ce qui est montré.
Le cas d’un graphique est encore différent. Si ses valeurs deviennent illisibles, un recadrage automatique n’est généralement pas une bonne réponse. Une version simplifiée, un agrandissement accessible ou une présentation textuelle peuvent être envisagés. Le choix dépend de l’information à transmettre. Le guide sur les tableaux de données dans les articles aide à préparer une autre voie de lecture.
Distinguer taille du fichier et place dans la page
Le navigateur peut recevoir plusieurs versions d’une image grâce aux attributs srcset et sizes. Le premier décrit les fichiers disponibles ; le second donne des indications sur la largeur d’affichage attendue. Le navigateur choisit ensuite une ressource en fonction des informations dont il dispose. Cette mécanique est présentée dans le guide web.dev sur les images adaptatives.
Le fichier original de la médiathèque ne suffit donc pas à expliquer ce que le lecteur reçoit. Une photo très définie dans la médiathèque peut être servie dans une petite version, ou une grande ressource peut être utilisée pour une zone étroite. L’équipe technique doit examiner la ressource réellement choisie sur la page concernée.
Dans WordPress, le bloc Image propose des choix de résolution qui dépendent notamment du thème et du fichier chargé. La documentation distingue ces réglages des dimensions et du ratio d’affichage. Documentation du bloc Image. Les options visibles dans un site ne doivent donc pas être supposées identiques à celles d’une autre installation.
Un essai sur une copie de brouillon permet de comprendre le comportement du thème. L’éditeur peut changer le réglage d’une image, prévisualiser la page et noter ce qui varie. Si l’image reste floue, il ne faut pas continuer à augmenter les valeurs au hasard. Le fichier sélectionné, ses dimensions et les transformations appliquées doivent être vérifiés ensemble.
Le nombre de pixels et le poids en octets décrivent d’ailleurs deux choses différentes. Le premier aide à juger la définition disponible ; le second correspond à une quantité de données. Deux fichiers de mêmes dimensions peuvent avoir des poids et des défauts visuels différents. Le choix ne peut donc pas se résumer à une valeur unique imposée à tous les sujets.
Réduire le poids avec un critère éditorial visible
Avant de fixer une limite de poids, la rédaction peut comparer deux exports du même visuel à la taille où le public le verra. Les contours, les petits caractères et les zones de dégradé servent de points de contrôle. Une réduction qui efface les informations d’une carte ou rend un document illisible coûte plus qu’elle ne rapporte au lecteur.
Quelques images représentatives du média suffisent pour commencer cette comparaison. Une photographie de reportage ne pose pas les mêmes difficultés qu’une illustration comportant du texte ; un portrait peut révéler d’autres défauts encore. Cet échantillon proposé doit être adapté aux contenus publiés. Dans un média d’art ou de photographie, le niveau de détail à préserver mérite notamment une discussion avec les personnes qui choisissent les images.
L’original doit rester disponible dans le circuit d’archivage du média. Les essais d’export peuvent être conservés séparément avec des noms explicites, jusqu’à validation. Écraser le seul fichier source pour gagner de la place rendrait les reprises futures plus difficiles. Le guide sur l’export et la sauvegarde WordPress explique pourquoi la présence d’un fichier dans le CMS ne suffit pas à décrire une sauvegarde complète.
Une règle de préparation utile indique ce qui doit être vérifié, et laisse place aux exceptions justifiées. Elle peut préciser le cadrage attendu, le contrôle de lisibilité et l’endroit où ranger l’original. Une consigne réduite à « moins de tant de kilo-octets » encourage au contraire à dégrader certaines images sans savoir si leur chargement était réellement le problème.
Examiner le chargement de la première image à part
Le chargement différé permet de reporter le téléchargement d’images éloignées de la zone visible. Il ne faut pas l’appliquer indistinctement à l’image principale déjà visible à l’ouverture. Le guide web.dev recommande d’éviter ce report pour les images présentes dans le premier écran, en particulier celle qui constitue l’élément principal mesuré par le LCP. Chargement différé des images dans le navigateur.
La rédaction n’a pas besoin de modifier elle-même ces attributs. Elle peut signaler une observation précise : le titre et le début du texte sont visibles, mais un grand espace attend la photo. L’équipe technique regarde alors quand la requête démarre, quelle ressource est demandée et ce qui retarde son affichage. Une compression supplémentaire ne corrigerait pas forcément un téléchargement déclenché trop tard.
Le mouvement du texte mérite aussi d’être observé. Si l’arrivée de l’image déplace brutalement le paragraphe en cours de lecture, il faut le documenter. Les dimensions déclarées permettent au navigateur de réserver de l’espace, comme l’explique le même guide. La correction doit néanmoins être vérifiée sur la page complète, où d’autres éléments peuvent provoquer des déplacements.
Un essai isolé sur une connexion rapide reste limité. Pour comparer avant et après, il faut conserver autant que possible les mêmes conditions et répéter quelques ouvertures. Le compte rendu distingue les mesures techniques des impressions visuelles. Une amélioration sur un téléphone ne démontre pas un gain identique pour tous les lecteurs, ni un effet sur le classement dans Google.
Contrôler l’article, la carte et le partage séparément
L’image du corps d’article, celle de la carte de rubrique et l’aperçu d’un lien social peuvent avoir des réglages différents. Une réparation dans l’un de ces emplacements ne vaut pas vérification des autres. Dans notre reportage fictif, la photo principale peut être complète tandis que la vignette de rubrique continue de masquer la rampe.
Le contrôle final suit donc les usages réellement prévus. On ouvre l’article sur mobile, on rejoint la rubrique, puis on examine l’aperçu du lien si un partage est programmé. La question reste la même : le visuel et son contexte correspondent-ils à l’information annoncée ? Le guide sur les aperçus Facebook et LinkedIn traite les problèmes propres à ces cartes sociales.
Les images destinées à Google Discover font également l’objet d’exigences spécifiques. Cet article porte sur la lecture du site après l’arrivée du visiteur. Rendre une image nette et correctement cadrée sur mobile ne permet pas de conclure qu’elle apparaîtra dans Discover, ni de déduire une hausse de trafic.
La comparaison avant et après permet de clore le signalement avec un résultat visible. Elle devrait préciser les réglages changés et les emplacements contrôlés. Si le correctif porte sur un modèle utilisé par plusieurs articles, il reste à ouvrir quelques pages différentes. La prochaine fois qu’une image paraît dégradée, la rédaction disposera ainsi d’un exemple pour distinguer un fichier à reprendre d’un affichage à faire examiner.
Sources officielles
Documents utilisés pour vérifier les points techniques de cet article.