Pourquoi mon logo PNG est-il flou et comment le corriger ?

Trouvez où le flou apparaît en premier

Exporter un PNG plus grand aide lorsque le visuel d’origine contient assez de détails. Agrandir un petit fichier matriciel ne peut pas restituer les courbes et les formes de lettres exactes du logo vectoriel d’origine.

Ouvrez le PNG lui-même avant de modifier le site web ou d’exporter à nouveau. Inspectez-le à sa taille d’utilisation prévue et au niveau des pixels. Comparez-le ensuite à la source validée et à la version importée.

Utilisez les vérifications suivantes pour identifier l’étape qui mérite votre attention. Elles ne supposent pas que tous les contours flous ont la même cause.

• Flou dans le visuel d’origine : trouvez une meilleure source ou examinez la version du design pour petite taille.
• Source nette, PNG téléchargé flou : vérifiez les dimensions d’export, les limites et les réglages de pixellisation.
• Téléchargement net, affichage flou sur le site ou dans l’e-mail : vérifiez quelle image est servie et comment elle est mise à l’échelle.
• Symbole net, minuscules lettres illisibles : vérifiez la taille minimale du logo ou utilisez une version simplifiée validée.

Vérifiez le contenu réel de la source

Un véritable maître vectoriel fournit des formes pouvant être rendues à une nouvelle taille. Un SVG peut aussi contenir des images bitmap intégrées : un nom de fichier SVG ne prouve donc pas que le logo est vectoriel.

Si votre source est un petit PNG copié depuis un ancien site, demandez le fichier de travail d’origine ou un export vectoriel vérifié. Réexporter ce petit PNG à une taille supérieure ajoute des pixels estimés. Adobe décrit le suréchantillonnage comme un processus pouvant introduire des artefacts sans ajouter de détails absents de l’original.

Si le maître est indisponible, reconstruire ou vectoriser le symbole est un travail de design distinct. Comparez les lettres et les formes reconstruites à une référence validée avant d’en faire un nouveau maître.

Pour aller plus loin : MDN : formats d’image · Adobe : taille d’image et rééchantillonnage

Comparez les pixels du fichier aux pixels affichés

Utilisez la taille d’affichage réelle plutôt que la largeur que vous pensiez obtenir dans la mise en page. Les outils de développement du navigateur permettent de vérifier la zone de rendu de l’image. Tenez compte des points de rupture adaptatifs et de toute transformation agrandissant le logo.

Redimensionner le PNG existant de 200 × 50 à 400 × 100 ne crée pas l’équivalent d’un export depuis un visuel vectoriel. Les deux fichiers peuvent avoir les mêmes dimensions tout en présentant des détails de contour différents. Le ratio de pixels de l’appareil est le rapport entre les pixels physiques de l’écran et les pixels CSS.

Pour le calcul complet et les exemples de livraison, consultez les tailles de logo PNG pour les sites web et les e-mails.

Voici un exemple illustratif avec le logo fictif Morrow Quay, et non un test client réel :

• L’en-tête affiche le logo à 200 × 50 pixels CSS.
• Le PNG importé ne contient que 200 × 50 pixels.
• Un objectif 2× nécessite 400 × 100 pixels.
• Réexportez le visuel vectoriel à 400 × 100 en conservant l’affichage à 200 × 50.

Poursuivez avec : Tailles de logo PNG pour les sites web et les e-mails

Pour aller plus loin : MDN : devicePixelRatio

Vérifiez l’image réellement servie par la destination

Un grand original ne sert à rien si la page charge une vignette générée plus petite. Vérifiez la ressource sélectionnée et ses dimensions en pixels. Pour les images adaptatives, la propriété currentSrc du navigateur identifie l’URL de l’image choisie. Comparez cette ressource à l’import original.

Si le fichier servi est plus petit, inspectez les réglages d’image du CMS ou demandez au développeur d’utiliser le fichier approprié. Si ses dimensions sont correctes, comparez visuellement les fichiers avant d’accuser l’optimisation. Un service peut redimensionner, convertir ou traiter autrement un import, mais établissez quel changement a réellement eu lieu.

Le PNG utilise une compression sans perte. Réduire son poids avec un procédé réellement sans perte ne floute pas les pixels en soi. Convertir en PNG un JPEG déjà dégradé conserve également les défauts existants. Vérifiez toute la chaîne de traitement, y compris le redimensionnement ou la conversion avec perte, plutôt que de considérer la « compression » comme une seule opération.

Pour aller plus loin : MDN : currentSrc · MDN : formats d’image et compression

Inspectez les marges et les réglages des contours

Les marges transparentes occupent une partie des dimensions de l’image. Un canevas de 400 pixels de large contenant un symbole de 200 pixels de large ne dispose que de 200 pixels horizontaux pour décrire le logo visible. Si vous affichez toute l’image à une taille supérieure pour agrandir le symbole, vous agrandissez aussi ces pixels. Corrigez les limites accidentelles dans la source tout en préservant l’espace de protection validé.

Un léger lissage le long des courbes est un anticrénelage normal. Évaluez le fichier à sa taille d’utilisation réelle comme en zoomant. Des lettres extrêmement petites ou des traits fins peuvent nécessiter une variante validée pour petite taille même si les dimensions d’export sont techniquement suffisantes.

Figma propose des choix de rééchantillonnage PNG : Detailed est le réglage par défaut, et Basic utilise l’échantillonnage au plus proche voisin. Comparez les réglages sur votre visuel réel ; un contour paraissant plus dur n’est pas automatiquement plus fidèle. Figma accepte aussi une largeur d’export fixe comme 400w.

Illustrator propose la fonction native Exporter pour les écrans pour des sorties matricielles aux échelles choisies. Ses options d’export PNG comprennent des réglages d’anticrénelage. Vérifiez un nouvel export depuis le visuel d’origine plutôt que de redimensionner sans cesse le PNG précédent.

Pour aller plus loin : Figma : réglages d’export · Adobe : Exporter pour les écrans · Adobe : options d’export PNG

Réexportez et vérifiez la correction

Créez un seul fichier de remplacement aux dimensions requises avant de régénérer tout le pack. Placez-le au même endroit et comparez-le à la version précédente. Vérifiez à nouveau le fichier servi pour qu’une ancienne vignette ou un fichier en cache ne brouille pas le résultat.

Avec une source SVG validée, les tailles PNG personnalisées de logopack.app Pro peuvent aider à créer des fichiers adaptés à chaque destination au sein d’un pack de logos. Il s’agit d’une méthode d’export, pas d’un service de vectorisation ou de réparation de logos basse résolution.

Si la destination prend en charge le SVG, une version vectorielle vérifiée peut être plus adaptée. Notre guide des formats de fichiers explique ce choix et notre guide d’export Figma couvre la préparation de la source.

Considérez le problème comme résolu lorsque le bon fichier est suffisamment net à la taille prévue, que le fond convient et que le système destinataire conserve les proportions voulues. Gardez le maître vérifié et les réglages d’export pour la prochaine livraison.

Poursuivez avec : Guide des formats de fichiers · Guide d’export Figma

Pour aller plus loin : Préparer les exports avec logopack.app