PNG en Base64

Comment convertir un PNG en Base64

1. Déposez un fichier .png dans la zone ou choisissez-le avec le sélecteur de fichiers. Pour encoder une capture d’écran, copiez-la et appuyez sur Ctrl+V (Cmd+V sur Mac) sur cette page ; inutile de l’enregistrer d’abord.
2. Si le PNG est plus gros que nécessaire, réglez Largeur max., ou choisissez WebP sous Convertir en. Supprimer les métadonnées (EXIF) retire les chunks de texte et EXIF.
3. Laissez Sortie en sur Data URI, ou passez à CSS, <img>, Markdown, JSON ou Base64 brut.
4. Copier la sortie. L’aperçu affiche la taille en pixels et, après réencodage, la nouvelle taille du fichier.

À quoi ressemble un PNG en Base64

Tout PNG commence par les mêmes 16 octets : la signature de 8 octets et l’en-tête du chunk IHDR, qui doit venir en premier. En Base64, cela donne un début fixe de 22 caractères :

iVBORw0KGgoAAAANSUhEUg

Toute chaîne qui commence par iVBORw0KGgo est donc un PNG, qu’elle se trouve dans une réponse JSON, un fichier de log ou une colonne de base de données. La largeur et la hauteur suivent juste après, codées dans les caractères suivants.

Pour référence, voici un PNG complet de 1×1 entièrement transparent. Le fichier fait 70 octets et le Base64 96 caractères :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

Le collage comporte un piège. Les navigateurs et les visionneuses placent généralement une image copiée dans le presse-papiers en PNG, quel que soit son format d’origine : une photo JPEG collée arrive donc sous forme de PNG, parfois bien plus gros que le fichier sur le disque. Déposez le fichier d’origine quand le format source compte.

Si votre PNG encodé commence par autre chose, le fichier n’était pas un PNG. Un fichier .png qui est en réalité un JPEG commence par /9j/, et un WebP renommé en .png commence par UklGR. Le type MIME de l’aperçu indique ce que le navigateur a détecté.

PNG, JPEG ou WebP avant l’encodage

Le PNG est sans perte : c’est le bon choix pour les logos, les icônes, les graphismes d’interface et les captures d’écran contenant du texte. Pour les photos, c’est le mauvais : un PNG photographique est souvent plusieurs fois plus gros qu’un bon JPEG ou WebP de la même image. Comme Base64 gonfle tout ce qu’on lui donne d’environ 33 %, c’est le format choisi qui décide de l’essentiel de la taille finale.

Le convertisseur réencode via le canvas du navigateur. Cela a trois conséquences :

• Convertir en JPEG fait perdre la transparence. Les pixels transparents deviennent blancs.
• Safari n’a pas d’encodeur WebP. Demandez du WebP dans Safari et vous récupérez du PNG, avec une note qui le signale.
• L’encodeur du canvas n’optimise pas les PNG. Réencoder un PNG déjà compressé par un optimiseur dédié peut l’alourdir. Comparez les tailles dans l’aperçu et gardez l’original s’il est plus léger.

Supprimer les métadonnées (EXIF) retire au passage les données annexes comme l’EXIF et les chunks de texte. La plupart des PNG en contiennent peu, mais les captures d’écran et les exports de certaines applications incluent des noms de logiciels ou des horodatages.

Où l’on trouve des PNG en Base64

• Les icônes CSS : background-image: url("data:image/png;base64,...") pour de petites icônes qui ne doivent pas coûter une requête supplémentaire. Pour les icônes vectorielles, un SVG est généralement plus petit ; voir SVG en Base64.
• La sortie de canvas : canvas.toDataURL() renvoie par défaut une data URI PNG, ce qui explique que les pavés de signature, les graphiques et les éditeurs d’images produisent si souvent ce format. Base64 en PNG le retransforme en fichier.
• Les payloads d’API : les services de captures d’écran, les exécuteurs de tests et les API d’IA de vision échangent des PNG en Base64 dans du JSON. Vérifiez si l’API veut le préfixe data:image/png;base64, ou du Base64 seul, et choisissez Data URI ou Base64 brut en conséquence.
• Les snapshots de tests et les rapports de bugs : les tests visuels et les outils de rapport de plantage placent souvent les captures d’écran dans leurs rapports JSON ou HTML en PNG Base64, pour qu’un rapport tienne en un seul fichier.
• Les favicons et les pages en un seul fichier : un petit favicon PNG intégré dans <link rel="icon"> permet à un fichier HTML de rester autonome. La page favicon donne les détails.

Encoder un PNG dans le code

Node.js lit le fichier dans un Buffer et l’encode en un seul appel :

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

Dans un navigateur, un canvas vous donne directement la data URI PNG :

const uri = canvas.toDataURL("image/png");

Voir Base64 en Node.js pour le streaming et la sortie URL-safe, et Base64 en JavaScript pour les fichiers et les Blob dans le navigateur.

Réparer une data URI PNG qui ne s’affiche pas

• Le préfixe est faux. Il doit s’agir de data:image/png;base64,, virgule comprise. Sans ;base64, le navigateur lit les caractères comme du texte brut.
• URL-safe est coché. Les navigateurs ne décodent que l’alphabet standard dans les URL data:. Un Base64 PNG contenant - et _ s’affiche comme une image cassée.
• Des sauts de ligne dans le CSS. Couper à 76 est destiné aux e-mails. Dans une feuille de style, un saut de ligne à l’intérieur de url("...") invalide la déclaration.
• La chaîne a été coupée. Un PNG se termine par un chunk IEND fixe de 12 octets : son Base64 se termine donc par AAAAAElFTkSuQmCC, AABJRU5ErkJggg== ou AAAASUVORK5CYII=, selon le reste de la division de la longueur du fichier par 3. Si la fin est différente et que l’image est à moitié dessinée ou absente, la copie a été tronquée. Validez la chaîne pour vérifier sa longueur et son remplissage.

FAQ