Logo flou sur Shopify ou WordPress : corriger la source et l’affichage
Diagnostiquez un logo web flou : dimensions sources, miniatures du thème, écrans haute densité et exports SVG ou PNG adaptés à la taille réellement affichée.
Réponse rapide
Comparez les dimensions réelles du logo avec celles de son affichage. Une image de 120 px étirée sur 240 pixels CSS sera floue. Utilisez un SVG propre si la plateforme et le thème le prennent en charge de façon sûre, sinon un PNG suffisamment grand. Vérifiez aussi si le thème sert une miniature réduite.
Distinguer source et thème
| Observation | Contrôle | Solution |
|---|---|---|
| Original déjà flou | Dimensions sources | Retrouver l’original ou vectoriser |
| Original net, en-tête flou | Fichier servi et largeur | Corriger les tailles du thème |
| Ordinateur net, mobile flou | Densité de l’écran | Plus de pixels ou SVG |
| Petit logo dans un grand cadre | Marges inutiles | Ajuster le canevas |
Les pixels CSS ne correspondent pas toujours aux pixels de l’image. Un logo de 200 pixels CSS sur un écran 2× bénéficie d’environ 400 pixels sources. C’est un exemple pratique, pas une invitation à envoyer des fichiers énormes. Davantage de pixels augmente le poids sans réparer une source déjà floue.
Réparer méthodiquement
- Examinez le fichier réellement chargé dans l’en-tête, pas seulement celui de la médiathèque.
- Notez ses dimensions naturelles et sa largeur affichée. Testez les en-têtes ordinateur et mobile.
- Cherchez l’export original du graphiste. Si seul un raster plat subsiste, créez un maître avec Logo vers vecteur.
- Exportez dans un format accepté par le thème. SVG vers PNG fournit une alternative raster avec transparence si nécessaire.
- Remplacez l’image, videz le cache concerné et contrôlez la page publiée dans une nouvelle session.
Utiliser SVG sans contourner la sécurité
Certains systèmes limitent les SVG parce qu’ils peuvent contenir des éléments actifs ou externes. Respectez la procédure d’importation et de nettoyage de votre plateforme. Ne désactivez pas globalement les protections pour un seul logo. Un PNG transparent correctement dimensionné reste parfaitement valable.
L’optimiseur SVG réduit le balisage inutile d’un maître propre. Il ne retrouve pas des détails perdus et ne corrige pas les lettres déformées. Vérifiez le rendu après chaque transformation.
Contrôler le résultat publié
- En-tête, menu mobile et pied de page utilisent le bon fichier.
- Aucune règle du thème ne déforme les proportions.
- Les fonds clairs et foncés gardent un contraste lisible.
- L’image charge correctement avec des dimensions évitant les sauts de mise en page.
- Les petites lettres restent lisibles à taille réelle.
Questions fréquentes
Passer à 300 DPI améliore-t-il le logo web ?
Pas à lui seul. Le navigateur affiche des pixels selon la mise en page. Les dimensions sources et affichées comptent davantage qu’une indication de résolution d’impression.
Faut-il toujours préférer SVG ?
Non. SVG convient aux logos nets et aux icônes. PNG reste pratique si la plateforme refuse SVG ou si le dessin repose sur des détails matriciels. Choisissez le format sûr le plus simple.