> PNG | encode | data-uri <
// Encodez les images PNG en chaînes Base64 et URI de données — transparence alpha préservée, exécuté intégralement dans votre navigateur
Déposez le PNG ici ou cliquez pour sélectionner
Cliquez pour parcourir les fichiers PNG
Alpha préservé
Le canal alpha PNG, la palette et les blocs gAMA/tRNS sont encodés octet par octet — aucune recompression, aucune perte de qualité.
100 % côté client
Votre PNG ne quitte jamais le navigateur. L'encodage s'effectue localement via FileReader + btoa() — sans aller-retour serveur.
Copier-coller
Obtenez une URI data:image/png;base64,… conforme aux standards, prête pour HTML, CSS, e-mails, charges utiles JSON et SVG en ligne.
// FAQ — PNG VERS BASE64
Q : Qu'est-ce que l'encodage PNG vers Base64 ?
R : Il convertit le contenu binaire d'un fichier .png en une chaîne ASCII en utilisant l'alphabet Base64 défini dans la RFC 4648. Le texte encodé peut être inséré directement dans une balise HTML <img>, un background-image CSS, un message e-mail, une charge utile JSON d'API, ou tout autre canal de transport texte uniquement. Les octets PNG eux-mêmes restent inchangés — chaque bloc IHDR, IDAT, tRNS et IEND est encodé et peut être récupéré à l'identique.
Q : Comment encoder un PNG en Base64 dans le navigateur ?
R : Glissez votre PNG dans la zone de dépôt (ou cliquez pour parcourir). L'outil lit le fichier avec FileReader.readAsDataURL(), qui renvoie déjà une URI data:image/png;base64,… prête à l'emploi. Choisissez URI de données si vous souhaitez la coller directement dans <img src="…">, ou Charge utile Base64 uniquement si votre API/base de données attend la partie Base64 brute sans le préfixe data:image/png;base64,.
Q : Encoder un PNG en Base64 entraîne-t-il une perte de transparence ou de qualité ?
R : Non. Base64 est une pure transformation binaire vers texte — chaque octet du PNG original est préservé, y compris le canal alpha, la palette et le profil de couleur (blocs iCCP/sRGB). Lorsque vous décodez la chaîne en retour, le fichier est bit-à-bit identique à l'original. Un hachage SHA-256 du PNG décodé correspondra à l'original. C'est pourquoi Base64 est l'outil approprié pour intégrer des icônes, logos et captures d'écran où la précision pixel près est importante.
Q : De combien un PNG grossit-il après l'encodage Base64 ?
R : Base64 utilise 4 caractères pour chaque 3 octets d'entrée, donc la chaîne encodée est ~33 % plus grande que le fichier PNG original. La taille exacte est 4 × ⌈n / 3⌉ caractères, où n est la taille du PNG en octets. Un PNG de 10 Ko devient ~13,6 Ko de texte Base64. Comme la compression HTTP (gzip, Brotli) gère assez bien le texte Base64, la surcharge sur le fil est généralement plus proche de 10-15 % en pratique.
Q : À quoi ressemble un PNG encodé en Base64 ?
R : Toute chaîne Base64 de PNG commence par iVBORw0KGgo. Ce préfixe est la signature PNG de 8 octets 89 50 4E 47 0D 0A 1A 0A réencodée en Base64. Donc iVBORw0KGgoAAAANSUhEUg... est toujours un PNG, et voir ce préfixe est une vérification visuelle rapide que vos données sont intactes. Lorsqu'elle est encapsulée en URI de données, elle ressemble à : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Q : Comment intégrer un PNG en Base64 dans du HTML ?
R : Collez l'URI de données complète dans l'attribut src d'une balise <img> : <img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Le navigateur décode la charge utile Base64 et affiche le PNG exactement comme s'il était chargé depuis une URL. Aucune requête HTTP supplémentaire n'est effectuée, ce qui est utile pour les icônes critiques, les signatures d'e-mail et les applications fonctionnant en mode hors ligne.
Q : Comment utiliser un PNG Base64 comme arrière-plan CSS ?
R : Enveloppez l'URI de données dans la fonction url() : .icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Pour la réutilisation, stockez-la dans une propriété CSS personnalisée : :root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
Les arrière-plans en ligne éliminent une requête HTTP par icône mais alourdissent votre fichier CSS, donc utilisez-les uniquement pour de petites icônes (< 4 Ko).
Q : Comment encoder un PNG en Base64 en JavaScript / Node / Python / PHP ?
R :
JavaScript (navigateur) : const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js : fs.readFileSync('logo.png').toString('base64')
Python : import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP : base64_encode(file_get_contents('logo.png'))
Go : base64.StdEncoding.EncodeToString(pngBytes)
Ruby : Base64.strict_encode64(File.read('logo.png'))
Q : Quand utiliser un PNG Base64 plutôt qu'un fichier image classique ?
R : Utilisez les URI de données PNG Base64 quand :
• l'image fait < 4 Ko (pour économiser un aller-retour HTTP)
• vous devez l'intégrer dans un e-mail HTML (de nombreux clients bloquent les images distantes)
• vous livrez un rapport ou tableau de bord HTML en fichier unique
• vous stockez l'image dans une charge utile JSON ou une colonne de base de données
Préférez un fichier .png externe lorsque l'image est volumineuse, réutilisée sur de nombreuses pages ou nécessite une mise en cache CDN séparée.
Q : L'encodage Base64 fonctionne-t-il avec la transparence PNG et les PNG à palette ?
R : Oui. Parce que Base64 est une transformation bit-à-bit, chaque mode de couleur PNG est pris en charge de la même manière :
• RGBA / truecolor + alpha — couleur 32 bits, transparence complète
• Palette (PLTE) + tRNS — PNG à palette indexée avec transparence 1 bit
• Niveaux de gris + alpha — niveaux de gris 8/16 bits avec alpha
• PNG en couleurs profondes 16 bits — PNG de type HDR utilisés en imagerie médicale et visualisation scientifique
Tous effectuent un aller-retour propre via Base64 et s'affichent correctement dans les navigateurs qui comprennent le PNG.
Q : Un PNG encodé en Base64 est-il chiffré ou privé ?
R : Non. Base64 est un encodage, pas un chiffrement. Quiconque peut lire la chaîne peut la décoder en retour vers le PNG original en quelques millisecondes. Si une capture d'écran contient un mot de passe, un jeton d'API ou des informations personnelles, l'encoder en Base64 ne la protège pas — utilisez une véritable couche de chiffrement (AES-GCM, age, PGP) par-dessus la sortie Base64, ou transportez l'image via TLS vers un serveur qui applique des contrôles d'accès.
Q : Quelle est la taille maximale de PNG que je peux encoder ici ?
R : Il n'y a pas de plafond artificiel. Comme l'encodage s'exécute localement, la limite est la mémoire de votre navigateur — généralement 100 Mo+ sur ordinateur de bureau et 40 à 60 Mo sur mobile. Pour les très gros PNG (imagerie médicale ou satellite haute résolution), nous lisons le fichier par morceaux et appelons btoa() sur chaque morceau pour que le thread principal reste réactif. Si votre image dépasse ~100 Mo, envisagez de la diffuser directement depuis un encodeur côté serveur au lieu de la charger dans le navigateur.
Q : PNG vers Base64 vs JPG vers Base64 — lequel utiliser ?
R : Utilisez PNG → Base64 pour les logos, icônes d'interface, captures d'écran, diagrammes et tout ce qui a de la transparence ou des bords nets (texte, graphiques). PNG est sans perte et gère l'alpha. Utilisez JPG → Base64 pour les photographies ou images avec de nombreuses couleurs où la compression avec perte est acceptable. Les fichiers JPEG sont généralement 5 à 20 fois plus petits que les PNG pour des photos, donc la charge utile Base64 est beaucoup plus courte. Règle empirique : si l'image vient d'un appareil photo ou contient des dégradés photographiques, utilisez JPG ; sinon PNG.