Exporter un logo pour un site web, un e-mail et un document

Un logo correct dans le logiciel de création peut devenir minuscule, flou ou invisible après importation. Des marges vides, un nombre insuffisant de pixels, une police absente ou un fond inadapté peuvent l’expliquer. Commencez par déterminer où le logo apparaîtra, puis choisissez les réglages d’export.

Partez du meilleur original disponible

Travaillez à partir du fichier modifiable du graphiste ou d’une véritable version vectorielle. Gardez ce fichier maître à part des copies publiées. Un SVG peut conserver des tracés vectoriels, mais aussi contenir une image bitmap de faible définition. L’extension .svg ne garantit pas que tous ses éléments resteront nets à l’agrandissement.

Si vous ne possédez qu’un petit JPG, demandez l’original avant de produire un export plus grand. Une conversion en PNG ou en SVG ne recrée pas les lettres ni les contours. Le guide SVG et PNG vous aidera à identifier votre fichier.

Choisissez le format selon la destination

Le SVG conserve les formes vectorielles ; le PNG enregistre une grille fixe de pixels. La compression sans perte du PNG convient aux lettres, aux aplats et aux contours nets : l’enregistrement n’ajoute pas les défauts de compression que peut introduire le JPG. Le JPG peut brouiller les contours ou créer des franges colorées autour des lettres, et ne préserve pas la transparence.

Le WebP peut utiliser une compression avec ou sans perte. L’outil SVG vers WebP de Pixilo propose un réglage de qualité, pas un mode sans perte distinct : la valeur 100 ne garantit pas des pixels identiques. Utilisez-le si la destination accepte le WebP et si le fichier obtenu est satisfaisant. Pour un logo simple, conserver le SVG ou un PNG adapté peut être préférable.

Adaptez l’export à la taille d’affichage

Distinguez les dimensions en pixels du fichier de sa taille d’affichage. Supposons que le dessin exporté soit quatre fois plus large que haut et doive apparaître sur 160 × 40 pixels CSS. Un PNG de 320 × 80 pixels fournit deux pixels d’image par pixel CSS dans chaque direction, un point de départ utile pour un écran haute densité. C’est un exemple, pas une taille imposée ni une règle obligeant à doubler tous les exports.

Verrouillez les proportions et ne saisissez généralement qu’une dimension. Si le logo est deux fois plus large que haut, une largeur d’affichage de 160 pixels donne une hauteur de 80 pixels, pas 40. Faites-le tenir dans la largeur et la hauteur disponibles sans le déformer ; utilisez une autre composition approuvée si le logo complet ne rentre pas.

Les dimensions comprennent les marges transparentes. Si le logo visible n’occupe que la moitié d’une image de 320 pixels de large, il apparaîtra sur environ 80 pixels lorsque l’image entière sera affichée sur 160 pixels. Corrigez l’espace vide involontaire dans l’original, en préservant la zone de protection de la marque. Réglez aussi la largeur d’affichage dans l’éditeur du site ou de la signature et vérifiez si le service crée une copie redimensionnée.

Modifier uniquement une valeur DPI n’ajoute pas de détails. Consultez le guide DPI, PPI et pixels. Pour une impression professionnelle, demandez des spécifications distinctes de fichier, de couleurs et de résolution.

Vérifiez la zone à exporter et le lettrage

Ajustez la zone d’export au logo en conservant sa zone de protection et l’espace nécessaire aux contours et aux ombres. Un grand plan de travail vide fait paraître le logo petit, même dans un fichier riche en pixels. Ne supprimez pas les marges prévues par la marque pour obtenir un cadrage plus serré. Le guide d’export d’Inkscape distingue l’export de la page, du dessin et de la sélection.

Vérifiez les polices et les images liées avant l’export. Convertir le texte en tracés transforme les lettres en formes vectorielles : leur apparence ne dépend plus des polices installées chez le destinataire. Elles ne sont alors plus modifiables comme du texte ordinaire. Faites donc cette conversion sur une copie d’export et gardez l’original. Cette opération ne vectorise pas une petite image bitmap intégrée au fichier.

Créez un SVG autonome contenant les images et les styles nécessaires. Un fichier correct lorsqu’on l’ouvre seul peut se comporter différemment comme image web, car les ressources externes sont limitées dans ce contexte. La documentation MDN l’explique. Comparez l’export au dessin, puis vérifiez la version placée. Contrôlez les lettres, les espacements, les éléments coupés et les effets, pas seulement l’ouverture du fichier.

Préparez les couleurs écran séparément des fichiers d’impression

Utilisez les couleurs RVB approuvées par la marque pour les versions écran. Pour les exports web PNG et JPG, sRGB est un choix de départ pratique. Les conseils d’Adobe pour les couleurs en ligne expliquent la conversion. Si la source utilise un autre profil, convertissez les couleurs dans le logiciel de création au lieu de simplement attribuer un nouveau profil, puis examinez le résultat.

Conservez à part l’original d’impression en CMJN ou en tons directs. Les versions écran et imprimée peuvent avoir des valeurs de couleur approuvées différentes ; un convertisseur de format ne peut pas les choisir pour vous. Comparez à la version écran validée, tout en sachant que les écrans peuvent encore varier. Pour un écart visible, consultez le guide de diagnostic des différences de couleur.

Préparez des versions pour fonds clairs et sombres

La transparence ne change pas les couleurs du logo. Exportez si nécessaire un logo sombre approuvé pour les fonds clairs et un logo blanc ou clair pour les fonds sombres. Sur un site, le modèle ou son développeur doit sélectionner la bonne version : créer deux fichiers ne les fait pas alterner automatiquement.

Vérifiez l’e-mail séparément. Les applications peuvent changer le fond du message en mode sombre, et la prise en charge du remplacement d’image varie. Testez les messages reçus dans les deux modes. Si le logo sombre disparaît, demandez au graphiste une version approuvée qui reste visible, par exemple avec un contour contrastant ou un fond adapté. Aucune solution ne garantit le même rendu dans toutes les applications. Les conseils de Mailchimp sur le mode sombre expliquent l’importance des tests.

Le PNG peut conserver la transparence existante ; le JPG exige un fond opaque. Choisissez ce fond avant l’export JPG. Une case de transparence ne supprime pas un rectangle blanc dessiné dans le logo. Le guide des fonds transparents aide à distinguer un véritable fond de la surface de prévisualisation.

Créez les versions PNG, JPG ou WebP dans Pixilo

1. Ouvrez le SVG préparé dans SVG vers PNG. Choisissez SVG vers JPG si la destination exige le JPG, ou SVG vers WebP si vous avez retenu ce format pour cet usage.
2. Saisissez la largeur ou la hauteur d’export en gardant les proportions verrouillées. Conservez la transparence si elle est prise en charge ou choisissez le fond définitif.
3. Convertissez et téléchargez le fichier. Vérifiez le fichier téléchargé, pas seulement l’aperçu de la source. La compression du PNG est sans perte, sans niveau de qualité à régler ; pour le JPG et le WebP, examinez les lettres et traits fins après le réglage de qualité.
4. Placez la copie, réglez sa taille et vérifiez la page publiée, le message reçu ou le document exporté. Assurez-vous de voir le nouveau fichier et non une ancienne version en cache.

Pixilo crée des copies d’image statiques, pas un logo modifiable ni un SVG optimisé. Son lecteur SVG refuse les ressources externes et les contenus non pris en charge. En cas de refus, revenez au logiciel de création et exportez une copie autonome, avec le texte converti en tracés si nécessaire. Les limites actuelles de fichier et de dimensions figurent sur la page de l’outil. Gardez l’original pour les prochains exports.

Donnez aux fichiers des noms sans ambiguïté

Précisez la couleur du dessin séparément du fond. Par exemple, dark-artwork désigne un dessin sombre, pas un fichier destiné à un fond sombre :

• Original modifiable : gardez le fichier natif du graphiste, avec sa véritable extension, à part des copies publiées.
• brand-logo-dark-artwork.svg et brand-logo-white-artwork.svg : dessin sombre pour fonds clairs et dessin blanc pour fonds sombres.
• brand-logo-dark-artwork-320x80.png : un PNG transparent pour la taille d’affichage de l’exemple, 160 × 40 pixels. Le nom indique les dimensions du fichier en pixels.
• brand-logo-white-background.jpg : un JPG facultatif sur fond blanc opaque pour une destination qui l’exige.

Joignez une courte note précisant la taille d’affichage et le fond. Créez seulement les versions utiles. Un favicon demande souvent un dessin simplifié distinct, car le logo complet avec son nom peut être illisible dans un onglet. Consultez le guide du favicon.

Vérifiez le logo dans son contexte

Commencez par le plus petit usage réel. Les lettres sont-elles lisibles, les traits fins visibles et les marges préservées ? Testez ensuite les fonds clairs et sombres. Pour l’e-mail, envoyez un vrai message de test et vérifiez la copie reçue. Pour un document, ouvrez le PDF exporté et contrôlez une impression si le résultat papier compte.

Sur un site, donnez au logo une alternative textuelle adaptée. S’il est le seul contenu d’un lien vers l’accueil, indiquez cette destination, par exemple « Accueil de la marque ». Si le texte visible du même lien fournit déjà le nom et la fonction, évitez la répétition. Le guide du W3C sur les images fonctionnelles montre les deux cas.

Questions fréquentes

Pourquoi le logo importé est-il flou alors que le fichier téléchargé est net ?

Comparez les dimensions réelles du fichier importé à sa taille d’affichage. La plateforme a pu créer une copie plus petite, ou la mise en page l’agrandir. Vérifiez le fichier utilisé par la page publiée et les éventuelles marges transparentes excessives. Agrandir encore l’export ne corrigera pas une page qui choisit toujours la mauvaise version.

Pourquoi le PNG est-il entouré d’un rectangle blanc ?

Examinez le fichier téléchargé sur un damier et sur un fond coloré. Si le rectangle fait partie des pixels, cherchez un objet de fond dans la source ou une transparence aplatie à l’export. Si le fichier est transparent et que le rectangle apparaît uniquement après placement, vérifiez le fond appliqué à l’image ou sa conversion dans l’application destinataire. Ne retirez un fond dessiné que si le logo le permet.

Puis-je utiliser le même fichier dans toutes les signatures d’e-mail ?

Partez d’un PNG et testez l’éditeur, les messages reçus et les modes clair et sombre. Une image hébergée doit rester disponible à son adresse publiée ; une image intégrée doit survivre au traitement du système de messagerie. Gardez les coordonnées en vrai texte pour qu’elles restent lisibles si les images sont bloquées. Un aperçu réussi dans l’éditeur de l’expéditeur ne suffit pas.

Convertir un PNG en SVG rend-il le logo redimensionnable sans perte ?

Intégrer un PNG dans un SVG conserve ses pixels d’origine. Le redessiner ou le vectoriser peut créer des tracés, mais aussi modifier les courbes, espacements ou lettres. Demandez d’abord l’original vectoriel et faites comparer toute reconstruction au logo approuvé.

Que faire si le logo dépasse la limite d’import ?

Vérifiez d’abord si la limite concerne le poids en Ko ou les dimensions en pixels. Exportez les dimensions requises, retirez l’espace vide involontaire et évitez les agrandissements inutiles. Pour le PNG, essayez une compression sans perte avant de sacrifier les contours. Si un format avec perte est exigé, comparez le fichier téléchargé en réduisant la qualité. Le guide de réduction du poids des images explique ces compromis. Aucun objectif unique en Ko ne convient à tous les logos et destinations.

Pourquoi les lettres ou les couleurs changent-elles après conversion ?

Comparez le dessin modifiable, le SVG exporté, l’image téléchargée et le résultat placé pour trouver la première étape différente. Des polices absentes ou remplacées orientent vers l’export du texte ; des images ou effets manquants peuvent indiquer un contenu SVG non pris en charge. Un changement de couleur demande de vérifier le profil source et l’export écran. Corrigez cette étape et exportez à nouveau au lieu de reconvertir une copie déjà incorrecte.