Tailles de logo PNG pour les sites web, les e-mails et la livraison client

Commencez par l’emplacement

Il n’existe pas de taille PNG unique adaptée à tous les sites web, signatures e-mail et présentations clients. Une livraison utile indique au destinataire quel fichier utiliser et à quelle taille l’afficher.

Pour un site web, demandez la taille CSS rendue du logo aux largeurs de mise en page concernées. Un logo d’en-tête de 200 pixels sur ordinateur peut être plus petit sur mobile. Pour les e-mails, vérifiez le modèle ou l’éditeur de signature plutôt que de reprendre un réglage du site web. Pour les présentations, convenez d’un emplacement utile et inspectez la diapositive exportée à la résolution prévue.

Le SVG peut être un bon choix pour les logos vectoriels lorsque le système destinataire l’accepte. Le PNG est utile pour une image de taille fixe avec transparence. Notre guide des formats de logo explique les autres choix.

Avant d’exporter, notez quatre éléments :

• L’emplacement du logo et les formats de fichiers acceptés
• Sa largeur et sa hauteur d’affichage, marges transparentes comprises
• La nécessité éventuelle d’une version matricielle à plus haute densité
• La limite de poids d’import et tout redimensionnement appliqué par la plateforme

Poursuivez avec : Guide des formats de logo

Calculez les dimensions du PNG

Pour un emplacement matriciel, utilisez cette règle de calcul :

Largeur d’export = largeur affichée × densité de pixels visée.

Appliquez le même multiplicateur à la hauteur. Un export 2× double les deux dimensions, soit quatre fois plus de pixels au total. Cela ne signifie pas que le logo doit apparaître deux fois plus grand sur la page. Le ratio de pixels de l’appareil dans le navigateur décrit le rapport entre les pixels physiques de l’écran et les pixels CSS.

Pour l’exemple web ci-dessous, une version 3× ferait 600 × 150 pixels. Il s’agit d’une exigence distincte à convenir avec le développeur, pas d’une raison d’exporter toutes les tailles possibles.

Pour les sites web adaptatifs, un développeur peut proposer plusieurs images candidates avec srcset. Le navigateur peut ainsi sélectionner une ressource adaptée. Les fichiers exportés et les réglages d’affichage du site doivent correspondre.

Ces calculs illustrent un logo fictif Morrow Quay sur un canevas au ratio 4:1. Ce sont des choix de projet donnés à titre d’exemple, pas des exigences de plateforme ni des résultats de clients réels.

Pour aller plus loin : MDN : devicePixelRatio · MDN : images adaptatives

Vérifiez les dimensions de l’e-mail dans l’éditeur réel

Un PNG de 360 × 90 est un point de départ pertinent pour l’exemple de signature de 180 × 45 uniquement si les réglages de l’e-mail limitent son affichage à cette taille prévue. Insérez-le, vérifiez les réglages de taille et envoyez un e-mail de test. Examinez le résultat dans les messageries utilisées par votre public, y compris sur mobile si nécessaire.

La largeur totale d’un modèle d’e-mail est différente de celle de son logo. Mailchimp, par exemple, documente des recommandations d’image différentes pour ses nouveaux et anciens éditeurs et conseille des images à plus haute résolution avec des dimensions d’affichage limitées pour les écrans à haute densité. Il recommande aussi des images RVB et le PNG si la transparence est nécessaire. Ce sont les recommandations de Mailchimp, pas des spécifications universelles de signature.

Utilisez une version du logo adaptée au fond. Un logotype blanc transparent peut sembler vide sur un message blanc. Un logotype sombre peut devenir difficile à voir si la messagerie destinataire change le fond. Vérifiez le résultat réel avant de considérer le fichier comme prêt.

Poursuivez avec : Préparer la livraison de la signature e-mail et les vérifications du message reçu

Pour aller plus loin : Mailchimp : recommandations pour les images

Comptez les pixels du logo à l’intérieur du canevas

Les dimensions en pixels incluent l’espace vide. Supposons qu’un PNG de 400 × 100 contienne un logo visible de 320 × 80, centré avec 40 pixels de marge à gauche et à droite, et 10 en haut et en bas. Si l’image entière est affichée à 200 × 50, le logo visible n’occupe que 160 × 40.

Cet espace de protection peut être intentionnel. S’il s’agit d’une marge accidentelle, corrigez les limites d’export dans la source. Conservez toute règle d’espace de protection validée et indiquez au développeur si cet espace est intégré au fichier ou doit être ajouté par la mise en page. Agrandir toute l’image pour compenser modifie encore sa taille apparente.

Exportez les tailles dans Figma ou Illustrator

Figma propose des exports matriciels personnalisés natifs. Sélectionnez le logo ou le cadre préparé, ajoutez un export PNG et saisissez une largeur comme 400w dans le champ Scale. Vous pouvez aussi saisir une hauteur fixe avec h ou utiliser un multiplicateur comme 2x. Un multiplicateur suit les dimensions de l’objet sélectionné : vérifiez donc les pixels obtenus.

Les fonctions Exporter pour les écrans et Exportation de fichier d’Illustrator prennent aussi en charge plusieurs échelles et formats. Préparez le bon élément ou plan de travail, choisissez PNG et les échelles nécessaires, puis vérifiez les dimensions des fichiers téléchargés.

Pour une livraison Figma complète, suivez notre méthode d’export de logo.

Poursuivez avec : Méthode d’export de logo

Pour aller plus loin : Figma : formats et réglages d’export · Adobe : rassembler des éléments et exporter par lots

Rendez la livraison compréhensible

Ajoutez une courte note : « Le PNG du site web est un fichier 2× destiné à être affiché à 200 × 50 pixels. Conservez ses proportions. » Gardez le maître vectoriel validé pour générer directement les futures tailles.

Pour les travaux de préparation récurrents, logopack.app Pro ajoute des tailles d’export PNG et JPG personnalisées. Partez d’un SVG validé, choisissez les tailles selon vos destinations et inspectez les fichiers téléchargés. Les exports natifs de l’éditeur restent une solution valable ; la préparation d’un pack est utile lorsque vous voulez intégrer ces fichiers personnalisés au reste de la livraison.

Avant la livraison, ouvrez les fichiers réels, vérifiez leurs dimensions en pixels et leur transparence, puis placez le fichier prioritaire dans sa destination réelle. Si un fichier correctement dimensionné reste flou, utilisez notre guide de diagnostic des PNG flous.

Nommez les fichiers selon les informations utiles au client. Pour cet exemple :

• MorrowQuay_Primary_Web_400x100.png
• MorrowQuay_Primary_Email_360x90.png
• MorrowQuay_White_Slides_960x240.png

Poursuivez avec : Guide de diagnostic des PNG flous

Pour aller plus loin : Préparer un pack de logos avec logopack.app