Encodeur PNG vers Base64

PNG vers Base64 transforme un fichier PNG en une chaine de texte prete a copier (une URI de donnees) entierement sur votre appareil, sans aucun envoi. Les developpeurs y ont recours lorsqu'ils doivent integrer en ligne une petite icone, un logo ou un sprite directement dans un attribut img src en HTML, dans un background-image: url() en CSS, dans une charge utile JSON ou d'API, ou dans un e-mail HTML afin que l'image s'affiche sans requete HTTP separee ni hebergement externe. Comme le PNG que vous encodez est generalement un logo interne, une capture d'ecran d'application ou une icone de produit non publiee, l'envoyer sur le serveur d'un inconnu juste pour obtenir une chaine de texte est exactement le risque que cet outil elimine.

Ce que cette conversion fait reellement (et ce qu'elle ne fait PAS)

L'encodage Base64 est sans perte a 100%. Il ne recompresse ni ne re-affiche l'image ; il lit les octets bruts du fichier PNG et les reexprime sous forme de texte ASCII, de sorte que chaque pixel, chaque canal de couleur et l'integralite du canal alpha (transparence) sont identiques octet par octet apres decodage. C'est la difference essentielle avec une conversion de pixels comme PNG vers JPG, qui aplatit la transparence sur une couleur de fond unie. PNG vers Base64 conserve parfaitement la transparence, parce que le canal alpha fait simplement partie des donnees du fichier qui sont encodees.

Le fait le plus contre-intuitif : la sortie est plus volumineuse que la source, pas plus petite. Base64 fait correspondre chaque groupe de 3 octets (24 bits) a 4 caracteres ASCII, depensant 8 bits pour transporter 6 bits de charge utile, ce qui gonfle le texte d'environ 33%. Une icone de 9 Ko devient environ 12 Ko de texte ; un logo de 30 Ko se retrouve aux alentours de 40 Ko. La profondeur de couleur et la profondeur de bits de l'image (8 bits, couleurs reelles 24 bits ou palette indexee) ne sont absolument pas affectees, parce que Base64 ne touche jamais au modele de couleur, il ne fait que reencoder les octets existants. L'encodeur produit une URI de donnees correcte en trois parties : le schema data:, le type MIME image/png et le marqueur ;base64, avant la charge utile, par exemple data:image/png;base64,iVBORw0KGgo.... Ce qu'il ne fait PAS, c'est reduire votre fichier, le mettre en cache ou changer son format ; il rend seulement les octets surs a coller dans du texte.

Quand choisir PNG vers Base64 plutot que l'alternative

Utilisez une URI de donnees Base64 pour les petits fichiers de moins de 10 Ko environ (icones, logos, sprites, fonds d'un seul pixel). En dessous de ce seuil, le gonflement de 33% du texte coute moins cher qu'un aller-retour HTTP complet (DNS, TCP, TLS et en-tetes de requete), donc l'integration en ligne est globalement avantageuse. Au-dela de 10 a 20 Ko environ, un fichier .png normal et mis en cache se charge generalement plus vite, parce qu'une image Base64 integree en ligne ne peut pas etre mise en cache separement par le navigateur et est retelechargee avec chaque fichier HTML ou CSS qui la contient, ce qui alourdit le poids de la page si l'image est volumineuse ou reutilisee sur plusieurs pages. Si au contraire vous devez reduire un PNG photographique pour le web plutot que de l'integrer en ligne, optez pour la voie avec perte avec PNG vers JPG ou parcourez les autres outils images. Reservez PNG vers Base64 aux cas ou la transparence et la fidelite exacte comptent et ou le fichier est reellement petit.

Comment convertir

1. Deposez le PNG dans l'encodeur (il est lu localement dans votre navigateur, jamais envoye).
2. Le fichier est encode sur votre appareil en une URI de donnees Base64, complete avec le prefixe data:image/png;base64,.
3. Copiez la chaine de l'URI de donnees, ou telechargez-la sous forme de fichier .txt ; attendez-vous a une augmentation de taille d'environ 33% par rapport a la source, puisque les URI de donnees s'integrent directement dans le HTML et le CSS sous forme de texte.

Aucun envoi. Tout s'execute sur votre appareil.

L'encodage s'execute en Rust compile en WebAssembly, directement dans l'onglet de votre navigateur. Votre PNG est lu en memoire localement, encode, puis restitue sous forme de texte, avec zero requete reseau pour le fichier lui-meme. Une fois la page chargee, l'outil fonctionne entierement hors ligne, il n'y a rien a supprimer puisque rien n'a jamais ete envoye, et vous pouvez le verifier vous-meme en ouvrant l'onglet Reseau des outils de developpement et en constatant l'absence de tout envoi de fichier pendant que vous encodez. Cela compte particulierement ici, car les PNG que les developpeurs encodent en Base64 sont typiquement des logos de marque internes, des captures d'ecran d'application et des fichiers clients qui ne devraient jamais se retrouver sur un serveur tiers. Un encodeur base sur un serveur ne peut pas faire cette promesse, parce que son architecture exige que l'envoi ait lieu d'abord.

Aucune limite

Encodez autant de PNG que vous le souhaitez en un seul lot, sans limite de nombre de fichiers ni de taille liee aux quotas d'envoi. Pas de filigrane, pas d'inscription, pas de publicite, pas de sortie tronquee.

Questions frequentes

La conversion d'un PNG en Base64 fait-elle perdre en qualite ou en transparence ?

Non. Base64 est un encodage texte sans perte des octets bruts du fichier, pas une recompression, donc chaque pixel et l'integralite du canal alpha (transparence) se decodent a l'identique, octet par octet. Contrairement a PNG vers JPG, qui aplatit la transparence sur une couleur unie, PNG vers Base64 la preserve completement.

Pourquoi ma chaine Base64 est-elle plus volumineuse que le fichier PNG d'origine ?

Base64 represente chaque groupe de 3 octets binaires par 4 caracteres ASCII, ce qui ajoute environ 33% a la taille. Une icone de 9 Ko devient environ 12 Ko de texte, donc cette croissance est attendue et constitue le cout inevitable de la transformation du binaire en texte sur et collable.

Comment utiliser une URI de donnees PNG en Base64 dans le HTML et le CSS ?

En HTML, collez l'URI de donnees complete comme valeur de la source d'une image, par exemple <img src="data:image/png;base64,iVBORw0KGgo...">. En CSS, utilisez-la dans une declaration de fond, par exemple background-image: url("data:image/png;base64,iVBORw0KGgo...").

Que signifie le prefixe data:image/png;base64, ?

C'est l'en-tete en trois parties d'une URI de donnees : data: est le schema, image/png est le type MIME qui indique au navigateur comment interpreter la charge utile, et ;base64, signale que le texte qui suit est encode en Base64. Sans ce prefixe, le navigateur n'affichera pas la chaine comme une image.

Mes images sont-elles envoyees sur un serveur lorsque je les convertis ici ?

Non. Le PNG est lu et encode entierement dans votre navigateur grace a Rust compile en WebAssembly, avec zero requete reseau pour le fichier. Vous pouvez le confirmer en observant l'onglet Reseau des outils de developpement pendant que vous encodez.

Puis-je convertir un PNG en Base64 hors ligne ou sans Internet ?

Oui. Une fois la page chargee, l'encodeur WebAssembly s'execute localement, vous pouvez donc vous deconnecter d'Internet et il continuera de fonctionner. Rien ne quitte votre appareil, c'est pourquoi il fonctionne de la meme maniere en ligne ou hors ligne.

Quand faut-il utiliser une URI de donnees Base64 plutot qu'un fichier PNG classique ?

Utilisez Base64 pour les petits fichiers de moins de 10 Ko environ, ou l'integration en ligne evite la surcharge d'un aller-retour HTTP separe. Pour les images plus volumineuses ou reutilisees, un fichier .png normal et mis en cache se charge generalement plus vite, parce que le Base64 integre en ligne ne peut pas etre mis en cache de maniere autonome et est retelecharge avec chaque fichier qui l'incorpore.

Pourquoi tous les PNG encodes en Base64 commencent-ils par iVBORw0KGgo ?

Chaque fichier PNG commence par les memes octets de signature (89 50 4E 47 et l'en-tete qui suit), et l'encodage en Base64 de ces premiers octets produit toujours les caracteres iVBORw0KGgo. Reperer ce prefixe est un moyen rapide de confirmer qu'une URI de donnees contient bien un PNG.

Puis-je integrer un PNG en Base64 dans un e-mail HTML ?

Oui, parce que Base64 est la maniere sure de placer une image a l'interieur de formats uniquement textuels comme le HTML, le CSS, le JSON et le XML, ou des octets binaires bruts corromperaient la syntaxe. Gardez le fichier petit, puisque la croissance de taille de 33% et l'absence de mise en cache separee alourdissent chaque message qui le transporte.

Puis-je convertir plusieurs fichiers PNG en Base64 a la fois ?

Oui, vous pouvez encoder plusieurs PNG en lot en une seule passe, sans limite de nombre de fichiers ni de taille. Chacun est encode independamment et localement, de sorte qu'un dossier d'icones ou de logos peut etre traite d'un bloc sans qu'aucun ne touche un reseau.

Outils connexes : convertissez les pixels avec PNG vers JPG, ou parcourez l'ensemble des outils images.