Distinguer un logo étiré, recadré ou réellement flou
Un logo peut être net dans la bibliothèque de médias et méconnaissable dans l’en-tête. S’il paraît trop large ou trop haut, ses proportions ont probablement changé. Si une partie du symbole manque, cherchez un recadrage. Si les contours et les lettres deviennent mous alors que la forme reste correcte, comparez le fichier réellement chargé et la taille à laquelle il est affiché.
Le but consiste à retrouver le dessin prévu dans l’espace disponible, sans agrandir artificiellement une petite image ni refaire toute la navigation. Commencez par une page publique précise et une capture à la largeur où le défaut apparaît. Contrôlez aussi si le problème existe dès le chargement ou seulement après le défilement, lorsqu’un en-tête compact peut prendre le relais.
Un affichage différent dans l’éditeur ne prouve pas que l’original est endommagé. L’aperçu peut employer un autre réglage ou une autre taille d’image. À l’inverse, un fichier déjà flou à sa taille réelle ne retrouvera pas ses détails avec une règle CSS. La correction doit donc viser la source du défaut.
Gardez le fichier original et le réglage actuel avant de commencer. Si l’en-tête est partagé, travaillez sur une copie ou vérifiez toutes les pages concernées avant de reporter la modification. Un logo corrigé sur l’accueil peut devenir trop grand dans une page interne ou sur mobile.
Repérer quel élément affiche le logo
Avec un thème de blocs, ouvrez Apparence → Éditeur et le modèle ou la partie d’en-tête utilisée par la page. La Vue en liste aide à sélectionner le bloc exact. Distinguez Logo du site et Image : le premier représente l’identité globale, tandis que le second peut être une image propre à cette structure.
Remplacer l’image d’un bloc Logo du site peut modifier les autres occurrences de ce logo. Modifier la largeur du bloc concerne sa présentation, et une partie d’en-tête partagée peut elle-même être utilisée par plusieurs modèles. Ces deux niveaux de partage expliquent pourquoi une correction apparemment locale peut se voir ailleurs.
Avec un thème classique qui prend en charge le logo personnalisé, vérifiez Apparence → Personnaliser → Identité du site. Certains thèmes emploient leur propre panneau d’en-tête ; utilisez alors celui qui produit réellement le logo. Le chemin d’un constructeur tiers dépend de ce produit et ne se déduit pas des menus natifs.
Relevez le nom de la partie, le type de bloc et l’image sélectionnée. Si le défaut touche seulement l’en-tête au défilement ou le téléphone, cherchez la variante prévue pour cet état avant de remplacer l’identité principale. Un logo supplémentaire ne se corrige pas forcément au même endroit que celui affiché sur ordinateur.
Comparer l’original aux dimensions de l’affichage
Ouvrez Médias → Bibliothèque, puis la fiche du fichier choisi. Notez ses dimensions en pixels et ouvrez le fichier pour l’examiner à sa taille réelle. Une image de 160 pixels de large affichée sur 320 pixels doit être agrandie : le navigateur ne peut pas retrouver les détails absents. Une grande marge transparente autour du dessin réduit aussi la place réellement occupée par le symbole.
Comparez les rapports largeur sur hauteur. Un fichier de 600 × 200 a un rapport de trois pour un. Un affichage de 240 × 80 conserve ce rapport ; un affichage de 240 × 120 le déforme si l’image est étirée dans cette boîte. Ces valeurs sont des exemples de calcul, pas une dimension obligatoire pour un logo WordPress.
Sur la page publique, faites un clic droit sur le logo et choisissez Inspecter. Sélectionnez son élément img dans les outils du navigateur, puis consultez ses dimensions et les styles calculés. Recherchez une largeur, une hauteur, un rapport ou une transformation qui pourrait expliquer la forme obtenue.
- Relevez la taille du fichier original et sa forme.
- Mesurez la place affichée sur la page concernée.
- Comparez les proportions avant de modifier l’image.
- Si la forme est correcte mais les contours restent flous, poursuivez vers le fichier effectivement servi et la densité d’écran.
Corriger la largeur du bloc Logo du site
Ce parcours convient lorsque le bon fichier est sélectionné mais que son affichage est trop grand ou trop petit. Il demande les droits d’édition du modèle ou de la partie concernée. Dans l’éditeur de site, sélectionnez Logo du site dans la Vue en liste, puis ouvrez ses Réglages dans la barre latérale.
Le contrôle Largeur de l’image propose un curseur et une valeur numérique. Relevez la valeur existante et choisissez une largeur adaptée à la place de l’en-tête. Commencez par modifier cette seule valeur : changer simultanément les espacements, le fichier et l’alignement empêcherait d’identifier la correction utile. Enregistrez les objets effectivement concernés dans le panneau de sauvegarde.
Le résultat attendu est un dessin proportionné à la nouvelle largeur. Vérifiez la page publique et une autre page utilisant le même en-tête. Si le logo reste étiré malgré une largeur raisonnable, une règle de hauteur ou de mise en page peut encore imposer la déformation ; passez à l’inspection des styles.
Pour annuler, remettez la largeur initiale et enregistrez. N’utilisez pas Remplacer pour régler seulement une dimension, car cette action change la source du logo. L’option Utiliser comme icône du site concerne aussi les onglets du navigateur ; elle n’est pas nécessaire pour ajuster l’en-tête.
Rétablir les proportions d’un bloc Image
Si l’en-tête contient un bloc Image ordinaire, ses contrôles diffèrent de ceux du Logo du site. Ouvrez le modèle concerné, sélectionnez ce bloc puis sa barre latérale. Dans les réglages de dimensions et de proportions disponibles, relevez la largeur, la hauteur, le rapport et le mode d’ajustement avant de les changer.
Pour afficher le dessin sans déformation, fixez la largeur utile et laissez la hauteur en automatique lorsque ce choix est disponible. Si un rapport imposé découpe le symbole, revenez au rapport d’origine ou au mode qui montre l’image entière. Lorsque l’interface propose Contenir et Couvrir, Contenir conserve le dessin complet dans la boîte ; Couvrir peut en couper des portions pour remplir l’espace.
Si vous devez conserver une boîte de dimensions fixes, accepter un espace vide peut être préférable à couper la marque. Le mode Contenir ne retire pas les marges transparentes déjà présentes dans le fichier. Il ne peut pas non plus restituer une partie supprimée dans une image recadrée antérieurement.
- Modifiez le bloc identifié, sans toucher aux autres images du modèle.
- Ajustez la largeur et laissez la hauteur suivre les proportions.
- Vérifiez le symbole complet dans l’éditeur puis sur la page publique.
- Si l’essai échoue, rétablissez les quatre valeurs relevées avant de rechercher une règle CSS concurrente.
Vérifier le logo d’un thème classique sans modifier ses fichiers
Pour un thème classique, un administrateur peut généralement ouvrir Apparence → Personnaliser → Identité du site et retrouver le logo sélectionné. S’il existe déjà, le bouton permet de changer ce logo ; conservez le fichier actuel avant de choisir une autre image. Selon l’interface, l’enregistrement porte le nom Publier ou Enregistrer les modifications.
Un thème peut imposer une zone de recadrage ou fournir une largeur spécifique. Les dimensions attendues et la souplesse du recadrage viennent de sa prise en charge du logo personnalisé. N’ajoutez pas un fragment dans functions.php pour imposer une taille sans connaître les réglages et le rendu de ce thème.
Si le fichier est correct, gardez-le et cherchez d’abord le contrôle de largeur ou de hauteur documenté dans le panneau d’en-tête du thème. Changez une seule valeur, vérifiez l’aperçu, puis le site public. En l’absence de contrôle, l’inspection du CSS permet de déterminer si une petite correction ciblée est pertinente.
Le résultat doit conserver la proportion du dessin sur les pages principales. Pour revenir en arrière, sélectionnez le logo précédent ou remettez la valeur initiale. Ne supprimez pas l’ancien média : il constitue votre retour arrière et peut encore être utilisé dans une autre variante d’en-tête.
Remplacer une source trop petite par un export adapté
Ce parcours convient si le fichier lui-même manque de définition ou contient déjà un recadrage incorrect. Retrouvez le document graphique original ou demandez un export adapté au propriétaire de la marque. Agrandir une petite image existante ne recrée pas ses contours. La valeur de résolution d’impression, parfois exprimée en DPI, ne remplace pas les dimensions réelles en pixels nécessaires à l’affichage web.
Pour une source bitmap, exportez une image suffisamment grande pour les dimensions visées, avec le même rapport et une marge maîtrisée. Un PNG transparent peut convenir à un logo devant rester lisible sur plusieurs fonds. Examinez les petits caractères et les contours sur le fond réel de l’en-tête, pas seulement sur le damier d’un logiciel graphique.
Téléversez ce nouvel export comme un média distinct, sans écraser l’ancien fichier. Dans le bloc identifié, utilisez Remplacer et sélectionnez ce média. Pour un logo global, contrôlez les autres occurrences ; pour une Image, vérifiez les usages de la partie partagée. Conservez la largeur d’affichage prévue au lieu de laisser le nouveau fichier agrandir l’en-tête.
Le résultat attendu est une meilleure netteté à taille identique. Si le dessin reste flou, vérifiez que le navigateur reçoit bien le nouvel export. Pour annuler, resélectionnez le média précédent. Un fichier SVG validé peut répondre à d’autres besoins, mais changer de format ou autoriser son import n’est pas indispensable pour corriger un mauvais dimensionnement.
Contrôler le fichier servi et les écrans à forte densité
Le fichier affiché peut différer de l’original de la bibliothèque. WordPress ou un outil d’optimisation peut proposer plusieurs tailles, et le navigateur choisit une ressource selon les indications de la page et son contexte. Dans les outils de développement, ouvrez Réseau, filtrez les images puis rechargez la page. Retrouvez le logo grâce à son aperçu et ouvrez la ressource correspondante.
Comparez ses dimensions et sa qualité avec l’original. Une miniature de 150 pixels peut expliquer un mauvais résultat même si le fichier initial est très grand. Pour un bloc Image, le choix Résolution peut proposer Taille originale, Grande ou une autre taille disponible. Essayez une source adaptée à l’affichage, puis revérifiez la requête. Le bloc Logo du site ne présente pas nécessairement ce même menu.
Sur un écran où un pixel CSS correspond à deux pixels physiques, un logo affiché sur 200 pixels CSS de large peut bénéficier d’un fichier de 400 pixels de large. C’est un exemple de dimensionnement, pas une garantie de netteté ni une règle imposant un fichier énorme partout. Le zoom du navigateur peut aussi changer les conditions du test.
Si une variante optimisée est dégradée, comparez les deux fichiers à dimensions identiques avant d’accuser la compression. Corrigez le réglage de cette variante dans l’outil existant, ou excluez cette seule image si l’outil le permet. Ne régénérez pas toute la médiathèque et ne désactivez pas toutes les optimisations pour un logo sans avoir identifié la ressource fautive.
Corriger une hauteur CSS confirmée sur le seul logo concerné
Cette option technique convient si l’inspection établit qu’une hauteur CSS fixe déforme un bloc Logo du site et que le réglage natif de largeur fonctionne déjà. Dans les styles calculés, désactivez provisoirement la règle de hauteur pour vérifier que la forme redevient correcte. Le rechargement annule cet essai. Corrigez de préférence la règle d’origine lorsqu’elle appartient à votre CSS personnalisé.
Si une règle complémentaire est justifiée, sélectionnez le bloc Logo du site dans l’éditeur. Dans Avancé → Classe(s) CSS additionnelle(s), ajoutez logo-proportionnel, sans point, en conservant les autres classes. L’exemple ci-dessous vise l’image à l’intérieur de ce seul type de bloc portant cette classe ; il ne convient pas à une image de fond ou à un logo produit par un autre composant.
Placez la règle dans le CSS additionnel du site : Apparence → Personnaliser → CSS additionnel pour un thème classique, ou Apparence → Éditeur → Styles → menu à trois points → CSS additionnel pour un thème de blocs. Ne la collez pas dans un champ qui attend seulement les propriétés d’un type de bloc.
Vérifiez que cette règle gagne réellement dans les styles calculés. Si une règle plus précise, importante ou en ligne l’emporte, corrigez sa source plutôt que d’empiler des !important. Le résultat attendu est une hauteur calculée selon la largeur et le rapport du fichier. Pour annuler, retirez cette seule règle et la classe ajoutée. Le code ne rend pas plus nette une image trop petite.
.wp-block-site-logo.logo-proportionnel img {
height: auto;
}Distinguer les marges du fichier d’un recadrage d’affichage
Un logo peut sembler minuscule malgré une largeur importante parce que son fichier contient beaucoup de transparence autour du dessin. Agrandir le bloc agrandit aussi cette marge et peut gêner le menu. Ouvrez l’image seule pour identifier les limites du fichier et celles du symbole avant de changer ses dimensions.
Si les marges doivent être réduites, préparez une nouvelle version à partir de l’original. L’éditeur d’image accessible par le bouton de recadrage du bloc permet de sélectionner une zone puis d’enregistrer la version éditée ; les versions récentes conservent l’original dans la médiathèque. Vérifiez néanmoins le fichier et le bloc que vous modifiez, car l’ancien écran d’édition des médias suit un autre parcours.
Conservez une marge suffisante pour ne pas couper une lettre, un accent ou un contour. Le but est de mieux utiliser l’espace disponible, pas de forcer le symbole à remplir une forme carrée. Si vous voyez le dessin entier dans le fichier mais qu’il est coupé uniquement sur la page, revenez au rapport et au mode d’ajustement du bloc.
Comparez la nouvelle version à la même largeur, puis choisissez l’ancien média avec Remplacer si le résultat ne convient pas. Ne supprimez aucun fichier à cette étape. Une réduction de marge ne corrige pas les pixels manquants d’une source déjà petite.
Traiter les variantes mobiles et l’en-tête au défilement
Si le défaut apparaît seulement sur téléphone, vérifiez d’abord quel logo est visible à cette largeur. Certains thèmes affichent une autre image ou un autre groupe d’en-tête. Une correction du logo ordinateur peut donc rester sans effet. Répétez le repérage sur le logo réellement affiché, puis comparez son fichier et ses dimensions.
Regardez aussi les éléments voisins. Une largeur de logo excessive peut laisser trop peu de place au bouton de menu. Une hauteur fixe sur la rangée peut couper l’image même si son propre rapport est correct. Corrigez la valeur identifiée dans la disposition du groupe ou dans le panneau du thème, en conservant la valeur précédente.
Testez la page en haut puis après défilement. Un en-tête qui se réduit peut appliquer une autre règle ou charger un autre fichier. Vérifiez également les fonds clairs et foncés si le logo change d’apparence entre ces états. Une version blanche sur un fond clair relève du choix de variante, pas du flou.
Le résultat attendu associe un logo complet et une navigation utilisable, sans débordement horizontal. Revenez au réglage antérieur si le menu se décale ou si une autre largeur se dégrade. Un aperçu mobile dans l’éditeur aide à préparer la correction ; confirmez-la sur le site public et, lorsque possible, sur le téléphone concerné.
Contrôler le résultat avant de conserver la correction
Après enregistrement, rechargez la page en visiteur déconnecté. Si l’ancienne image persiste, comparez l’URL servie avant d’effectuer une purge ciblée avec l’outil de cache déjà présent. Changer le fichier, modifier la largeur et purger toutes les couches simultanément rendrait difficile l’identification de la cause réelle.
Vérifiez la netteté à la largeur prévue, les proportions, le symbole complet et son contraste avec le fond. Testez le lien du logo, puis le menu adjacent au clavier et sur mobile. Contrôlez au moins une page interne utilisant la même partie d’en-tête et une éventuelle variante au défilement.
Conservez les dimensions de l’export, la largeur d’affichage et l’endroit où le logo est configuré. Ces informations permettent de reproduire le réglage après un changement de thème ou une migration. Une extension d’optimisation ou de régénération d’images ne remplace pas ce relevé ; elle ne peut recréer les détails absents de votre original.
Si le défaut reste inexpliqué, transmettez la page, la largeur d’écran, le fichier original, l’URL réellement servie et une capture du réglage concerné. Ces éléments permettent d’examiner le bon composant sans modifier tout l’en-tête. Gardez l’ancien média et les valeurs de départ jusqu’à la fin de ces contrôles.
Mesurer le logo affiché avant de changer le fichier
Dans la copie, le bloc Logo du site demande un logo de 200 pixels CSS de large. Une règle du thème de test fixe sa hauteur à 64 pixels. Le fichier de 100 × 50 pixels a un rapport de deux pour un, alors que le cadre affiché mesure 200 × 64. Après retrait de la hauteur fixe, l’affichage passe à 200 × 100 avec le même fichier. Le lien du logo vers l’accueil reste disponible.
Sur votre copie, inspectez le logo visible dans l’en-tête public. Relevez la largeur et la hauteur affichées dans les outils de développement. Dans Réseau, identifiez l’image chargée à cette largeur et ouvrez ce fichier pour lire ses dimensions. Si les rapports diffèrent, repérez la règle du bloc ou du thème qui force la hauteur. Décochez temporairement cette règle dans l’inspecteur et comparez le résultat sans toucher à l’image choisie. Si le logo reprend ses proportions, reportez la correction dans le réglage ou la feuille de style de la source concernée. Rechargez la page pour annuler l’essai temporaire.
Vérifier le fichier réellement servi sur un écran dense
Le fichier de 100 × 50 pixels reste petit après le rétablissement des proportions. À 200 pixels CSS de large et avec une densité de deux pixels d’appareil par pixel CSS, le cadre demande environ 400 pixels de large dans l’image. La recette remplace le logo dans le réglage d’identité du site et relève le fichier réellement reçu. Chrome choisit un fichier de 400 × 200 sur le profil dense et un fichier de 300 × 150 sur le profil d’ordinateur à densité 1. Le cadre reste à 200 × 100 dans les deux cas.
Sur votre site, commencez par contrôler la ressource chargée avant d’exporter un autre fichier. Une source de bonne définition peut être disponible dans la médiathèque alors qu’une autre variante est livrée dans l’en-tête. Si la source est trop petite, préparez un nouvel export depuis le dessin ou le fichier de référence, en gardant les proportions et les marges voulues. Importez-le comme nouveau média et conservez l’ancien pour pouvoir le resélectionner.
Conserver le lien et vérifier le retour
Après remplacement, testez le logo à la largeur qui posait problème et sur une autre largeur. Vérifiez ses proportions, son texte alternatif lorsque prévu et la destination de son lien. Sur un en-tête qui change au défilement ou sur téléphone, inspectez le logo réellement visible dans chaque état. Si le nouvel export prend trop de place, revérifiez d’abord la largeur du bloc. Pour annuler, resélectionnez le média précédent et vérifiez le fichier chargé. Le banc a retrouvé l’affichage mesuré avant le remplacement. La densité de téléphone est émulée dans Chrome et les essais utilisent deux logos synthétiques.
