Comment convertir une image en Base64 ?

Dans l'onglet Fichier, glissez votre image dans la zone de dépôt ou cliquez pour sélectionner. La Data URI data:image/png;base64,… est générée instantanément et peut être copiée.

Comment utiliser une image Base64 dans du HTML ?

Utilisez la Data URI comme valeur de l'attribut src : . L'image est intégrée directement dans le HTML, sans fichier externe.

Quelle taille d'image est raisonnable en Base64 ?

Pour les petites icônes et logos (< 5 Ko), intégrer en Base64 réduit les requêtes HTTP. Pour les grandes images, Base64 augmente la taille de 33% et ralentit le chargement — préférez un fichier externe.

Flowfiles ← Encodeur/Décodeur Base64

Convertir une image en Base64

Q: L'image est-elle envoyée sur un serveur ?

Non. L'image est lue par le FileReader de votre navigateur. Aucune donnée n'est transmise à un serveur.

Générez une Data URI prête à intégrer en HTML et CSS — PNG, JPEG, WebP, GIF, SVG, ICO

Glissez votre image dans la zone ci-dessous pour obtenir instantanément une Data URI Base64 au format data:image/png;base64,…. Collez-la directement dans un attribut src HTML, une règle CSS background-image ou un email HTML. Tout se passe dans votre navigateur — aucune image n'est envoyée sur un serveur.

Besoin de l'outil complet avec toutes les options Base64 ?

Ouvrir l'outil Base64 →

Glissez une image ici ou cliquez pour sélectionner PNG, JPEG, WebP, GIF, SVG, ICO…

Intégrer une image Base64 en HTML et CSS

Une fois la Data URI copiée, vous pouvez l'utiliser de plusieurs façons :

Balise HTML : <img src="data:image/png;base64,iVBOR…" alt="Logo">
CSS background : background-image: url("data:image/png;base64,iVBOR…");
Email HTML : intégrez l'image directement dans le corps du message.
Canvas : chargez une image base64 comme source d'un élément <canvas>.
JSON/API : transmettez une image dans un champ JSON sans serveur de fichiers.

Conseil : privilégiez Base64 pour les petites images (icônes, logos < 5 Ko). Pour les grandes images, un fichier externe est plus efficace car la taille augmente de ~33 % avec Base64.

Questions fréquentes

Quels formats d'image sont supportés ?

Tous les formats supportés par votre navigateur : PNG, JPEG, WebP, GIF, SVG, ICO, AVIF, BMP. La Data URI inclura le type MIME correct (ex. data:image/webp;base64,…).

Comment utiliser la Data URI dans du CSS ?

Collez la Data URI dans une règle CSS : background-image: url("data:image/png;base64,…");. Pas besoin de guillemets supplémentaires si la chaîne ne contient pas d'espaces.

L'image est-elle envoyée sur un serveur ?

Non. La conversion est réalisée localement par l'API FileReader de votre navigateur. L'image ne quitte jamais votre appareil.

Quelle taille maximale d'image ?

Il n'y a pas de limite fixe, mais les grandes images produisent des Data URI très longues. Pour les images > 100 Ko, considérez un fichier externe ou une compression préalable avec notre compresseur d'images.

Outils associés

Outil Base64 complet Encodeur Base64 Décodeur Base64 Base64 sans upload Compresseur d'images Image → ASCII Art