Déterminer si le problème vient des pixels ou de la forme
Ouvrez la page publique et repérez une image problématique. Choisissez un détail visible qui permettra une comparaison, comme des lettres sur une affiche ou le bord d’un objet. Si le détail devient flou ou pixellisé tandis que les formes restent justes, cherchez une source trop petite ou trop compressée. Si un cercle devient ovale ou qu’un visage paraît allongé, examinez le rapport entre largeur et hauteur. Si le visage garde sa forme mais qu’une partie manque, l’image est probablement recadrée.
Gardez une capture de la page à sa largeur habituelle, puis sur téléphone. Notez si toutes les images d’une galerie sont touchées, si une seule occurrence pose problème ou si toutes les images d’un type ont la même déformation. Une photo nette dans un article mais floue dans une section de la page d’accueil peut être servie en deux tailles différentes. Une photo déformée uniquement dans une grille invite à examiner la disposition de cette grille.
Dans l’éditeur, ouvrez la page ou l’article puis affichez la Vue en liste. Vérifiez si vous avez sélectionné un bloc Image, une image de galerie, une couverture ou une image mise en avant. Chaque composant peut avoir ses propres réglages de source et de cadrage. Dans ce guide, commencez avec un bloc Image ordinaire, puis appliquez les mêmes comparaisons au composant qui fournit réellement l’image.
Relevez le nom du média, les dimensions connues et les valeurs de largeur, hauteur et proportions du bloc. Si le document est publié, utilisez un aperçu ou un brouillon pour les essais. Conservez le fichier initial afin de pouvoir le resélectionner après une comparaison.
Examiner le fichier dans la médiathèque
Dans Médias > Bibliothèque, ouvrez les détails du média utilisé. Notez ses dimensions en pixels et son adresse. Ouvrez le fichier dans un onglet lorsque l’interface le permet et observez un détail à une taille proche de sa taille native. Si le fichier est déjà flou, agrandir le bloc ne créera aucun détail. Cherchez le fichier d’origine avant compression ou une photo mieux définie.
Faites attention aux copies portant des noms voisins. Une petite version exportée pour un message peut avoir le même sujet qu’une photo originale. Une image de bibliothèque peut aussi correspondre à une version redimensionnée lors de l’import. Comparez les dimensions et la netteté du fichier disponible. Une version de 320 pixels de large peut convenir à une petite carte, tandis qu’une présentation occupant 800 pixels dans la page demandera généralement une source plus détaillée.
Si le média s’affiche correctement dans la bibliothèque, ouvrez la photo du document dans l’aperçu et comparez. La bibliothèque et la page ne chargent pas toujours le même fichier. Un site peut produire plusieurs variantes à l’import ou demander des versions adaptées à l’appareil. La qualité du média d’origine est un premier repère, puis il faut vérifier la variante utilisée et la largeur à laquelle elle est rendue.
Si l’image vient d’une adresse externe, identifiez cette adresse et vérifiez la taille réellement disponible. Un service distant peut servir une version réduite même si l’image semble grande dans l’éditeur. Si vous avez le droit de réutiliser le fichier et disposez d’une source de qualité, préparez une copie adaptée dans votre bibliothèque. Conservez l’ancienne adresse pour savoir exactement ce qui a été remplacé et pourquoi.
Choisir une résolution adaptée à la largeur d’affichage
Sélectionnez le bloc Image et ouvrez Réglages > Bloc. Cherchez Résolution ou Taille de l’image dans les réglages du bloc. Les choix proposés peuvent inclure Miniature, Moyenne, Grande ou Taille originale. Les dimensions réelles dépendent du site et du fichier. Les libellés indiquent une catégorie, tandis que le nombre de pixels détermine la quantité de détail disponible.
Si une miniature est étirée sur une grande largeur, essayez une taille disponible supérieure sans réimporter la photo. Comparez la netteté du détail choisi dans l’aperçu et regardez si le gain reste visible sur téléphone. Une variante de 1024 pixels peut être suffisante pour une colonne d’environ 600 pixels, selon la densité de l’écran et les détails du sujet. Un écran dense peut bénéficier d’un fichier plus grand pour cette même largeur. La comparaison visuelle et le poids transféré permettent de décider.
Lorsque l’image sert seulement de petite vignette, conservez une variante raisonnable. Charger systématiquement la taille originale peut alourdir une galerie sans amélioration perceptible. Pour une image où il faut lire des détails, vous pouvez offrir une ouverture vers une version agrandie si l’interface et le contenu s’y prêtent. Vérifiez que cette ouverture est compréhensible et que la légende reste accessible.
Si la taille souhaitée n’est pas proposée sur une image ancienne, vérifiez d’abord les dimensions du fichier. Une source trop petite ne peut fournir une variante réellement plus détaillée. Si la source est suffisante mais qu’un fichier intermédiaire manque, relevez le cas et comparez à une image récente. Demandez une régénération limitée aux médias concernés si cette cause est confirmée. Modifier les tailles générales du site pour une seule occurrence augmenterait le périmètre de l’intervention.
Rétablir les proportions sans perdre le sujet
Dans le bloc Image, examinez Styles puis les réglages de proportions et de dimensions. Lorsque le bloc le permet, revenez aux proportions originales et laissez la hauteur automatique. Réglez une largeur adaptée à la colonne. Si une largeur et une hauteur fixes forçaient un cadre d’une autre forme, ce changement doit rendre aux objets leurs proportions naturelles. Vérifiez l’image d’un bout à l’autre pour détecter un autre cadrage qui resterait actif.
Pour une série de cartes, un cadre identique peut être voulu. Choisissez le comportement selon la fonction. Un ajustement de type Couvrir remplit le cadre et coupe une partie de l’image si les proportions diffèrent. Un ajustement de type Contenir conserve tout le sujet et peut laisser de l’espace autour. Une photographie décorative peut supporter un recadrage. Une affiche ou un schéma contenant des informations nécessite souvent d’être visible en entier.
Si le point focal est proposé, placez-le sur la partie qui doit rester visible dans un cadre recadré, puis vérifiez une fenêtre étroite et une large. Si le bloc ne fournit pas de point focal, essayez une image dont la composition se prête au cadre ou un rapport mieux adapté. Pour une galerie, vérifiez que les changements s’appliquent au bon niveau. Modifier la galerie entière peut recadrer toutes ses images alors qu’une seule est concernée.
Évitez de redimensionner manuellement le fichier pour lui imposer une forme différente. Un fichier déjà étiré reste déformé même quand le bloc respecte ses proportions. Dans ce cas, reprenez l’original, puis choisissez un véritable recadrage si la composition en a besoin. Conservez la source entière pour les autres usages.
Vérifier la variante réellement choisie par le navigateur
Lorsque le résultat ne correspond pas à la taille sélectionnée dans WordPress, ouvrez la page publique et inspectez l’image dans les outils du navigateur. Sélectionnez la balise de l’image, puis observez la largeur et la hauteur rendues. Dans l’onglet Réseau, filtrez les images et rechargez la page. Une image chargée à l’approche de l’écran peut nécessiter un défilement jusqu’à sa position. Identifiez la requête qui correspond au détail examiné.
Si l’image annonce plusieurs variantes, le navigateur peut en choisir une en fonction de la largeur indiquée et des caractéristiques de l’affichage. Ne déduisez donc pas son choix du seul attribut src. Avec l’élément image sélectionné dans les outils d’inspection, les outils du navigateur peuvent montrer la source courante ou sa propriété currentSrc. Comparez cette adresse à la requête et examinez les dimensions du fichier chargé lorsque le navigateur les affiche.
Testez ensuite l’image à la largeur où elle est floue. Rechargez la page après avoir changé l’émulation de la fenêtre. Un navigateur peut réutiliser une variante plus grande déjà chargée, ce qui brouille la comparaison. Si les outils de développement le permettent, activez l’option Désactiver le cache et gardez-les ouverts pendant le rechargement. Vous pouvez aussi utiliser une nouvelle session privée après avoir fermé les autres fenêtres privées. Observez le fichier servi et la largeur rendue à chaque essai.
Lorsque la variante choisie est trop petite, vérifiez si le modèle, une extension de galerie ou un service de diffusion modifie les tailles disponibles. Transmettez l’adresse exacte, la largeur rendue et la variante servie au responsable. Ce relevé aide à distinguer un fichier manquant d’une règle qui indique au navigateur une largeur différente de celle de la page.
Corriger une règle du thème ou du constructeur
Si la même photo paraît correcte dans l’éditeur mais déformée uniquement dans la page publique, examinez les styles actifs dans le navigateur. Cherchez une largeur et une hauteur imposées, un ajustement qui étire le contenu du cadre ou un style appliqué à toutes les images d’une section. Comparez la forme du fichier et le rectangle rendu. Un fichier carré dans un cadre rectangulaire peut être recadré, centré avec des espaces ou étiré selon cette règle.
Dans un thème de blocs, vérifiez si le bloc Image concerné se trouve dans un modèle, une composition synchronisée ou la page elle-même. Corrigez les dimensions à cet endroit et vérifiez une autre occurrence si la zone est partagée. Dans un thème classique, les options d’image peuvent se trouver dans Personnaliser ou dans les réglages propres au thème. Avec un constructeur, inspectez le widget ou le composant image et ses réglages de taille, hauteur et ajustement par écran.
Si les commandes ne suffisent pas, le responsable peut tester une correction dans les outils du navigateur avant de l’appliquer au thème. Désactiver temporairement une hauteur fixe permet de vérifier si la déformation disparaît. Une correction de style doit viser le composant responsable. Les images de carte, les avatars et les logos peuvent avoir besoin de règles différentes et seraient affectés par un changement général.
Si un service de diffusion réduit ou compresse l’image, comparez la source accessible depuis le média et la réponse réellement affichée. Notez leurs tailles et le détail perdu. Cherchez un réglage du service qui vise ce contexte. Gardez la règle précédente pour pouvoir la rétablir si la qualité gagnée s’accompagne d’un poids excessif sur d’autres pages.
Remplacer seulement le média qui en a besoin
Si le fichier lui-même est insuffisant, préparez une source plus nette et gardez ses proportions. Choisissez des dimensions compatibles avec l’usage prévu, puis comparez son poids et sa qualité à ceux de la source existante. Pour un schéma contenant du texte, examinez les caractères les plus petits. Une compression acceptable pour un paysage peut effacer ces détails. Conservez le fichier de travail hors du site pour les exports suivants.
Dans le bloc, utilisez Remplacer ou le choix du média dans le panneau lorsqu’il est disponible. Cherchez d’abord si la meilleure source existe déjà dans la bibliothèque. Si vous devez importer un nouveau fichier, utilisez un nom identifiable et évitez de recréer plusieurs exemplaires du même export. Vérifiez après remplacement le texte alternatif, la légende, l’ancre et le lien éventuel. Le comportement de ces champs peut dépendre de la manière dont vous remplacez le média et de l’éditeur utilisé.
Si le document ouvre une image agrandie, testez cette action avec la nouvelle source. Si la photo fait partie d’une galerie, vérifiez aussi l’ordre et les légendes voisines. Une image de contenu n’est pas forcément la même occurrence que l’image mise en avant du document. Contrôlez la vignette des listes séparément si elle devait également changer.
Conservez l’ancien média tant que vous n’avez pas vérifié ses autres utilisations. Le supprimer dans la bibliothèque peut créer des liens brisés dans d’autres pages ou messages. Pour revenir en arrière, resélectionnez l’ancien média dans ce bloc et restaurez les paramètres relevés. Un remplacement ciblé facilite cette opération et permet de comparer les deux sources jusqu’à la validation.
Vérifier netteté, cadrage et poids après le changement
Rouvrez l’aperçu à la largeur où vous avez constaté le défaut. Comparez le détail choisi au départ et la forme d’un élément facile à reconnaître. Vérifiez ensuite un écran étroit et une vue plus large. Le résultat attendu est une image nette pour son usage, de proportions cohérentes et dont les parties importantes restent visibles. Une version agrandie doit garder le détail nécessaire sans obliger la page à transférer ce grand fichier pour chaque petite vignette.
Contrôlez aussi la légende et les actions autour de l’image. Si vous avez retiré une hauteur fixe, la page peut se réorganiser. Vérifiez que le texte suivant reste correctement placé et que les cartes de la même ligne gardent un alignement acceptable. Si vous avez modifié une règle partagée, ouvrez une page comportant une image de format opposé, comme un portrait après un paysage.
Après validation et enregistrement, ouvrez la page publique dans une session visiteur. Si l’ancienne variante reste visible, comparez l’adresse du média, la réponse reçue et l’état d’enregistrement avant de modifier de nouveaux réglages. Un cache de page et un cache d’image peuvent se situer à des niveaux différents. Utilisez une purge ciblée si elle est disponible et confirmez la variante ensuite.
Pour annuler, rétablissez la résolution et les dimensions du bloc, ou choisissez l’ancien fichier si la source avait été remplacée. Pour une règle du thème, rétablissez la déclaration testée puis vérifiez la page témoin. Consignez les dimensions du fichier finalement chargé et du bloc affiché pour pouvoir reprendre la comparaison si l’image ou le modèle change.
