Utilia
Catégories ▾
Langue: fr ▾

Convertisseur image en Base64

Convertissez une image en Base64 ou en data URI avec le code CSS et HTML prêt à coller, ou décodez du Base64 en image avec aperçu. Gratuit, sans envoi.

Image → Base64

Base64 → image

Comment convertir une image en Base64

  1. Dans Image → Base64, déposez une image dans la zone prévue ou cliquez pour la choisir (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Choisissez la Sortie : Data URI (data:image/png;base64,…), Base64 seul, CSS background-image ou Balise HTML , qui reprend aussi la largeur et la hauteur de l’image.
  3. Cliquez sur Copier, ou sur Télécharger en .txt pour un résultat très long.

La ligne sous la zone de dépôt indique le vrai format (lu dans les octets du fichier, pas dans son nom), les dimensions, le poids et la longueur du data URI.

Comment convertir du Base64 en image

  1. Dans Base64 → image, collez le texte dans Texte Base64 ou data URI. Vous pouvez coller une chaîne Base64 brute, un data URI complet, ou même une règle CSS ou une balise <img> entière : le data URI est retrouvé à l’intérieur. Les retours à la ligne et les espaces sont ignorés, et le Base64 « URL-safe » (avec - et _) est accepté.
  2. Cliquez sur Décoder l’image : l’aperçu, le type, les dimensions et le poids s’affichent.
  3. Cliquez sur Télécharger l’image pour l’enregistrer avec la bonne extension.

Le type est vérifié grâce aux « nombres magiques », la signature placée au début de chaque format d’image (par exemple 89 50 4E 47 pour le PNG ou FF D8 FF pour le JPEG). Si un data URI annonce image/jpeg alors qu’il contient un PNG, l’outil vous le signale et utilise le vrai type. Tout ce qui n’est pas une image reconnue est refusé, et la limite est de 20 Mo de données d’image.

Comment fonctionne le Base64

Le Base64 transforme chaque groupe de 3 octets en 4 caractères imprimables pris parmi A–Z, a–z, 0–9, + et /, avec = comme remplissage à la fin. C’est pourquoi le texte encodé pèse environ 33 % de plus que le fichier : une icône de 30 Ko devient environ 40 Ko de texte. Un data URI ajoute un court en-tête, data:<type>;base64,, pour que le navigateur sache comment le lire.

Quand intégrer une image en data URI ?

Les data URI sont pratiques pour :

  • les petites icônes, logos et fonds en CSS, afin d’économiser une requête ;
  • les e-mails HTML et les documents HTML autonomes qui doivent fonctionner sans fichier externe ;
  • les API JSON et les fichiers de configuration qui ne transportent que du texte.

Ils conviennent mal aux grandes photos. Le texte est un tiers plus lourd que le fichier, il ne peut pas être mis en cache séparément de la page ou de la feuille de style qui le contient, et il retarde l’affichage. Au-delà de 10 à 100 Ko environ, un fichier image classique bien mis en cache l’emporte, d’où le rappel affiché pour les images de plus de 100 Ko.

Tout se passe dans votre navigateur : les images et le texte collé ne sont jamais envoyés.

Questions fréquentes

Le Base64 compresse-t-il ou protège-t-il une image ?

Non. Le Base64 alourdit les données d’environ 33 % et n’importe qui peut le décoder. Il sert seulement à transformer des données binaires en texte, pour les faire passer là où le binaire n’est pas accepté.

Pourquoi mon data URI ne s’affiche-t-il pas ?

Les causes les plus fréquentes sont un type absent ou erroné dans l’en-tête, des espaces ou des guillemets collés au milieu de la chaîne, ou un texte tronqué. Collez-le dans Base64 → image : l’outil signale les caractères invalides et vérifie le vrai type.

Peut-on utiliser un SVG en data URI ?

Oui. Un SVG s’encode en Base64 comme n’importe quelle image. Pour le SVG, un data URI encodé en URL (data:image/svg+xml,%3Csvg…) est souvent plus court ; cet outil décode les deux formes.

Cela fonctionne-t-il avec les images HEIC ou AVIF ?

L’encodage fonctionne avec tout fichier image. L’aperçu n’apparaît que si votre navigateur sait afficher le format, mais le texte Base64 et le téléchargement sont toujours corrects.

Y a-t-il une limite de taille ?

Oui : 20 Mo de données d’image, dans les deux sens. Au-delà, le navigateur ralentit, et c’est rarement une bonne idée dans une page web.

Outils similaires