Aller au contenu principal
Bethemesh
Images & graphisme

Convertir une image en Base64 (et Base64 en image)

Encodez une image en Base64 ou décodez une chaîne Base64/Data URI en image, entièrement dans votre navigateur.

  • Presse-papiers
  • Export

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Vos fichiers sont traités localement dans votre navigateur et ne sont jamais envoyés sur nos serveurs.

Déposez votre fichier ici

Taille recommandée : 25 Mo maximum

Aperçu

Base64 / Data URI

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Base64 transforme les octets d’une image en texte composé de 64 caractères sûrs. Ainsi encodée, une image peut être collée directement dans du CSS, du HTML, un fichier JSON ou un e-mail sous forme de Data URI, sans fichier séparé. Cet outil fait les deux sens : il encode une image en Base64 et redonne une image à partir d’une chaîne Base64 ou d’une Data URI.

Onglet Image → Base64 : choisissez une image PNG, JPEG, WebP, GIF ou SVG de 25 Mo au plus. Elle est lue telle quelle, sans réencodage, et convertie en Data URI complète de la forme data:image/png;base64,…, prête à copier. L’aperçu confirme l’image lue, et une ligne indique la taille du fichier, celle de la Data URI et le surcoût en pourcentage.

Onglet Base64 → Image : collez une Data URI ou une chaîne Base64 brute. Pour une chaîne brute, choisissez son type MIME (PNG, JPEG, WebP, GIF ou SVG) ; les espaces et retours à la ligne sont retirés. L’aperçu s’affiche dès que la chaîne est valide et Télécharger l’image enregistre decoded-image avec l’extension correspondant au type.

Base64 code 3 octets en 4 caractères : le texte pèse environ un tiers de plus que le fichier, plus quelques caractères d’en-tête. Une chaîne invalide ou tronquée affiche « Base64 ou Data URI invalide. »

Comment utiliser cet outil ?

  1. Choisissez le sens

    Image → Base64 pour encoder, Base64 → Image pour décoder.

  2. Importez ou collez

    Déposez une image, ou collez une Data URI ou du Base64 brut en indiquant son type MIME.

  3. Copiez ou téléchargez

    Copiez la Data URI produite, ou téléchargez l’image décodée après avoir vérifié l’aperçu.

Taille d’un texte Base64

Base64 regroupe les octets par 3 (24 bits) et écrit chaque groupe avec 4 caractères de 6 bits ; le dernier groupe est complété par des signes =.

Longueur Base64

L = 4 × ⌈n ÷ 3⌉

Défini par la RFC 4648 ; 12 000 octets donnent 16 000 caractères.

Longueur de la Data URI

L_URI = L + p

p vaut 22 pour data:image/png;base64, et 26 pour data:image/svg+xml;base64,.

n
taille du fichier en octets
L
nombre de caractères Base64
p
longueur de l’en-tête de la Data URI

Cas d'utilisation

Intégrer une petite icône en CSS

Placez une icône de quelques kilo-octets dans background-image pour éviter une requête réseau.

Récupérer une image d’un fichier JSON

Décodez une image stockée en Base64 dans une réponse d’API ou un export pour la voir et l’enregistrer.

Préparer un e-mail ou un prototype

Insérez une image dans un HTML autonome qui doit fonctionner sans dossier d’images.

Exemples

Encoder une icône PNG de 12 000 octets

12 000 ÷ 3 = 4 000 groupes de 3 octets, soit 16 000 caractères Base64, plus 22 caractères pour data:image/png;base64,. Le surcoût de 34 % inclut l’en-tête.

Entrée

icone.png, 12 000 octets

Résultat

Data URI de 16 022 caractères ; « Fichier de 11,7 KB → Data URI de 15,6 KB (+34 %) »

Utiliser la Data URI dans du CSS

Le navigateur affiche l’icône sans télécharger de fichier. Réservez ce procédé aux petites images : une photo encodée alourdit la feuille de style et n’est plus mise en cache séparément.

Entrée

Data URI d’une icône SVG copiée depuis l’outil

Résultat

.alerte { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }

Conseils et bonnes pratiques

  • Limitez Base64 aux images de quelques kilo-octets ; au-delà, un fichier séparé se charge et se met en cache plus efficacement.
  • Optimisez l’image avant de l’encoder : chaque octet gagné en économise environ 1,33 dans le texte.
  • Pour un SVG, une Data URI non encodée (data:image/svg+xml, suivi du SVG échappé) est souvent plus courte que le Base64.
  • Si un décodage échoue, vérifiez que la chaîne est complète : une Data URI copiée depuis un journal est souvent tronquée.

Sources et références

Questions fréquentes

Base64 compresse-t-il l’image ?

Non, au contraire : le texte Base64 est environ 33 % plus lourd que le fichier. C’est un encodage pour transporter des octets dans du texte, pas une compression.

Quelle différence entre Base64 et Data URI ?

Base64 désigne le texte encodé seul. La Data URI ajoute devant un en-tête comme data:image/png;base64, qui indique le type de fichier au navigateur.

Que faire si je n’ai que du Base64 brut ?

Collez-le dans l’onglet Base64 → Image et choisissez le type MIME qui correspond à l’image d’origine (PNG, JPEG, WebP, GIF ou SVG).

L’image est-elle modifiée lors de l’encodage ?

Non. Les octets du fichier sont encodés tels quels : décoder la Data URI redonne exactement le même fichier, métadonnées comprises.

Le Base64 peut-il contenir des retours à la ligne ?

Oui, certains outils coupent les lignes tous les 76 caractères. L’outil supprime ces espaces et retours avant de décoder une chaîne brute.

Mon image est-elle envoyée sur un serveur ?

Non. L’encodage et le décodage sont faits par le navigateur, sans requête réseau.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Optimiser une image

Allégez une image en réglant sa qualité ou en visant un poids en Ko, avec le poids final affiché avant le téléchargement.

Images & graphismeMis en avantUtiliser l’outil

Optimiseur SVG

Réduisez le balisage SVG localement tout en conservant un fichier modifiable.

Images & graphismeUtiliser l’outil

Convertir et compresser une image

Convertissez une image en PNG, JPEG ou WebP et ajustez sa qualité avant téléchargement.

Images & graphismeMis en avantUtiliser l’outil

À lire aussi

TutorielBonnes pratiquesDébutant

Optimiser ses images pour le Web sans perdre en qualité

Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.

30 août 20265 min