Pourquoi mon logo apparaît flou dans l’en-tête de mon site WordPress ?

Beaucoup de thème WordPress gèrent l’intégration du logo dans les configuration de personnalisation. C’est devenu un option standard des thèmes WordPress, mais il arrive assez régulièrement que cette option pose problème lors de l’affichage de ce logo et que celui-ci s’affiche flou sur le site. Cela peut arriver même si vous télécharger une image nette à l’origine.

Voici quelles peuvent être les causes d’un logo flou dans l’en-tête (header) de votre site et comment corriger ce problème qui n’est pas si rare que cela.

Les formats PNG et SVG pour l’image de votre logo

Généralement les fichiers PNG (.png) conviennent très bien pour les images de type logo. Vous pouvez bien sûr utiliser le format JPG (.jpg), mais la compression JPG entraîne des pertes de qualité de l’image même si elle est enregistrée avec une qualité à 100%. Les fichiers PNG sont également compressés, mais la compression est sans perte (Lossless).

Le format vectoriel SVG s’adapte également très bien pour ce type d’image. Ce format enregistre l’image avec des vecteurs (courbes) plutôt que des pixels ce qui allège considérablement le fichier lorsqu’il s’agit d’image peu complexe (principalement avec de grands aplats de couleur, sans dégradé…). Il ne eut donc pas y avoir de flou sur ce type d’image puisqu’elle ne se compose pas de pixel, les traits sont toujours nets.

Cependant, créer une image au format SVG demande quelques ajustements (voir ci-dessous) et tous les logos ne se prêtent pas à ce type de format. C’est pourquoi vous travaillerez très probablement avec un fichier PNG.

Notez également l’existence de nouveaux formats d’image comme le WebP ou AVIF, qui offrent des performances de compression très intéressantes.

Précisions sur le format SVG

Le format SVG est un format d’image vectoriel, c.-à-d. que la taille du fichier n’a pas d’importance et qu’il ne peut pas être pixelisé car il s’agit de formes et non de pixels. Les navigateurs dans leur ensemble commencent à bien supporter ce type de fichier (hormis pour certains trop ancien).

Ce format SVG n’est pas un format d’image supporter par WordPress par défaut. Cependant, pour autoriser l’import de fichiers SVG, je vous invite à utiliser l’extension Safe SVG, qui s’occupe également de sécuriser les fichiers lors de l’importation.

/* ! Attention NON SÉCURIÉ ! */
/* Autoriser le téléchargement de fichier SVG */
 function wpc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
 }
 add_filter('upload_mimes', 'wpc_mime_types');

Vous trouverez plus d’informations sur l’importation de fichiers SVG dans WordPress en toute sécurité ici.

La taille du logo téléchargé (et format Retina)

Tout d’abord, vous devriez vérifier si le fichier image de votre logo que vous souhaitez télécharger n’est pas trop petit. Certains thèmes recommandent une taille minimale pour le logo. Si le thème ne vous l’indique pas (dans sa documentation notamment, à vérifier) vous pourrez peut-être retrouver cette information en recherchant le code suivant dans le code du fichier functions.php (du thème parent) :

add_theme_support('logo');

Attention, il se peut qu’il soit inscrit autre chose à la place de ‘logo‘ selon les thèmes ; recherchez surtout « add_theme_support » et essayez de voir s’il cela concerne bien l’image du logo du thème.

Si votre logo est trop petit, le navigateur agrandira forcément l’image qui apparaîtra alors floue sur le site. Dans la plupart des cas, le fichier téléchargé sera plus grand que la taille demandée par votre thème WordPress. Vous devriez dans ce cas faire une copie de ce fichier puis l’ enregistrer dans une autre taille plus petite, aux bonnes dimensions.

Attention cependant, il est possible que le logo présente un léger flou si l’image n’est pas proportionnelle au pixel près de la taille d’affichage :

Par exemple, imaginons que le thème bloque la hauteur du logo à 90 pixels et que le fichier image du logo que vous souhaitez importer fasse 785 x 180 px (certains thèmes demandent par exemple de télécharger des fichiers deux fois plus grands que la taille d’affichage sur le site pour les écrans Retina). Dans ce cas, une fois redimensionnée, l’image devrait donc faire 392,5 x 90 pixels ; le demi pixel n’étant pas possible à l’écran, l’image s’affichera en 392 x 90 px (ou 393) ce qui peut suffire pour laisser apparaître un léger flou. Si vous avez l’habitue de voir votre logo cela risque de vous sauter aux yeux.

Même si le flou peut paraître minime cela peut suffire à donner une mauvaise impression. À vous de voir pour rectifier cela dans un logiciel de traitement d’image ou de recadrer légèrement l’image pour tomber juste.

S’il s’agit d’une taille d’image bien trop petite le flou sera évidement bien plus prononcé ; il faudra alors réimporter un fichier plus grand pour régler ça. Pour cela, utilisez l’extension Enable Media Replace pour remplacer une image (média) dans WordPress sans avoir à supprimer l’ancien pour importer un nouveau fichier !

Pour revenir au Retina, des thèmes proposent parfois d’importer plusieurs logos différents (dans des tailles différentes donc) selon que l’internaute utilise ou non un écran Retina.

Enfin, notez que certains thèmes réactifs (responsive) redimensionnent automatiquement le logo en fonction de la largeur de l’écran. Le fichier image redimensionné peut alors paraitre flou, mais ne vous inquiétez pas pour ça.

On récapitule

Pour conclure en cas de logo flou sur votre site, vérifiez que votre image est à la bonne taille, ni trop petite et dans un format proportionnel à celui recommandé par votre thème. Recherchez donc à connaître la taille minimale ou recommandée par votre thème.

Utilisez de préférence un format PNG pour votre logo (ou SVG) au lieu du JPG, après cela dépend aussi de la nature de votre logo, si celui-ci présente trop de détails, des dégradés, etc., un PNG pourrait être assez lourd, à tester).

Si vous aussi vous rencontrez ce genre de souci, vous pouvez m’en faire part.