image Convertisseur d'Image Base64 star

Comment ça marche

Cet outil fonctionne dans les deux sens. En mode Image → Base64, choisissez un fichier avec le sélecteur natif du navigateur ; l'outil le lit avec l'API FileReader.readAsDataURL() et produit une URI de données complète — une chaîne du type data:image/png;base64,iVBORw0KG... — affichée dans un premier encadré, tandis que le contenu Base64 brut seul (sans préfixe) est affiché dans un second encadré, afin que vous puissiez récupérer la forme dont vous avez besoin, avec un bouton de copie en un clic pour chacune. En mode Base64 → Image, collez soit une URI de données complète, soit simplement le texte Base64 brut dans la zone de texte ; si vous collez du Base64 brut sans préfixe, l'outil ajoute automatiquement un en-tête data:image/png;base64, pour que le navigateur puisse quand même l'afficher, puis montre un aperçu <img> en direct avec un bouton de téléchargement qui réenregistre les octets décodés sous forme d'un véritable fichier image.

L'encodage Base64 prend des données binaires et les représente à l'aide de seulement 64 caractères ASCII imprimables (A–Z, a–z, 0–9, + et /), ce qui permet d'intégrer une image, intrinsèquement binaire, dans des formats purement textuels comme le HTML, le CSS, le JSON ou une URL. Le mécanisme est fixe et mathématique : chaque groupe de 3 octets (24 bits) du fichier d'origine devient exactement 4 caractères Base64 (4 × 6 bits), complétés par des = lorsque la longueur d'entrée n'est pas un multiple de 3. Ce ratio de 3 octets en entrée pour 4 caractères en sortie explique aussi pourquoi la sortie Base64 est toujours environ 33 % plus volumineuse que le binaire d'origine — 4 divisé par 3 vaut environ 1,333 — un surcoût mathématique fixe, et non une approximation ou un réglage de qualité.

Bon à savoir

Intégrer une image sous forme d'URI de données directement dans votre HTML ou CSS présente un réel avantage : cela élimine une requête HTTP supplémentaire, ce qui compte pour des ressources très petites et fréquemment réutilisées comme des icônes, de petits sprites, ou un minuscule logo intégré dans un modèle d'e-mail où les images externes pourraient être bloquées. Le compromis s'inverse pour tout ce qui est plus volumineux : une URI de données ne peut pas être mise en cache indépendamment par le navigateur comme le serait un fichier .png ou .jpg lié, elle gonfle la taille du fichier HTML/CSS qui la contient (de ce même ~33 %), et elle empêche ce fichier de s'afficher tant que la totalité du bloc encodé n'a pas été téléchargée. En règle générale, les URI de données conviennent bien aux ressources de quelques kilooctets et mal aux photos, images d'en-tête, ou tout ce qu'un utilisateur voudrait voir mis en cache d'une page à l'autre.

Le préfixe de type MIME — la partie image/png, image/jpeg ou image/webp de data:image/png;base64,... — n'est pas décoratif. C'est lui qui indique au navigateur (ou à tout autre programme lisant la chaîne) à quel décodeur confier les octets qui suivent ; sans lui, ou avec le mauvais, un contenu Base64 par ailleurs valide peut échouer à s'afficher ou s'afficher comme un type de fichier totalement différent. C'est exactement pour cette raison que cet outil ajoute automatiquement un préfixe PNG lorsque vous collez du Base64 brut sans préfixe fourni — un choix par défaut raisonnable, qu'il convient toutefois d'ajuster au format réel du fichier d'origine si vous savez qu'il s'agissait d'un JPEG ou d'un WebP.