Convertir images en Base64 Data URLs

Intégrer images dans HTML, CSS ou JSON. Pas de téléchargement serveur — 100% privé.

base64-converter.js
1const img = await loadImage(file);
2const canvas = document.createElement("canvas");
3const ctx = canvas.getContext("2d");
4ctx.drawImage(img, 0, 0);
5const dataUrl = canvas.toDataURL();
6return btoa(dataUrl);

Déposez des images ici

ou cliquez pour parcourir

JPGPNGWebPAVIFHEIC

Les fichiers ne quittent jamais votre navigateur

Paramètres de sortie

Choisissez comment le Base64 est livré.

Traité localement dans votre navigateur.

Convertissez des images en Base64 en 3 étapes

Téléchargement local, conversion instantanée, et copie ou téléchargement de fichiers texte.

Télécharger images ou ZIP

Glissez-déposez des fichiers ou une archive ZIP avec des dossiers.

Générer le Base64

Nous enchons chaque image localement sans aucun téléchargement.

Copier ou Télécharger

Copiez dans le presse-papiers ou téléchargez un ZIP de fichiers .txt.

Quand utiliser des images Base64

Scénarios courants où l'encodage Base64 améliore les performances et simplifie le déploiement.

Intégrations HTML & CSS

Intégrez de petites images directement dans le code pour réduire les requêtes HTTP et améliorer le temps de chargement initial.

Modèles d'email

Intégrez des logos et icônes dans des emails HTML pour qu'ils s'affichent sans blocage d'image.

Intégrations API

Envoyez des images à des API de vision IA, stockage cloud ou webhooks attendant des payloads Base64.

Applications fichier unique

Regroupez toutes les ressources dans un seul fichier HTML pour des outils hors ligne, démos ou documents portables.

Questions sur l'encodage Base64

Tout ce que les développeurs doivent savoir sur l'intégration d'images inline.

À quoi sert l'encodage Base64 ?

Le Base64 transforme une image en texte pour qu'elle puisse être intégrée directement dans des balises img HTML, des propriétés background-image CSS, des payloads JSON API et des modèles d'email sans avoir besoin de téléchargements de fichiers séparés.

Dois-je utiliser Data URL ou Base64 brut ?

Utilisez Data URL (avec le préfixe data:image/...;base64) pour les intégrations HTML et CSS. Utilisez le Base64 brut lors de l'envoi à des API comme OpenAI Vision, le téléchargement vers des services cloud, ou lorsque le système récepteur ajoute son propre préfixe.

Comment intégrer du Base64 dans le HTML ?

Utilisez le Data URL directement dans l'attribut src : <img src="data:image/png;base64,..." />. Cela élimine une requête HTTP et l'image se charge instantanément avec la page.

Comment utiliser le Base64 dans le CSS ?

Définissez-le comme image de fond : background-image: url("data:image/png;base64,..."). Idéal pour les petites icônes, motifs et éléments d'interface qui doivent se charger sans clignotement.

Mes images sont-elles téléchargées sur un serveur ?

Non. Toute conversion Base64 se fait localement dans votre navigateur en utilisant JavaScript. Vos images ne quittent jamais votre appareil, ce qui rend cela 100% privé et sécurisé.

Puis-je convertir un ZIP avec des dossiers à l'intérieur ?

Oui. Les téléchargements ZIP sont entièrement supportés. La structure des dossiers est préservée lors du téléchargement de tous les fichiers Base64 sous forme de ZIP, facilitant le traitement par lots.

Le Base64 augmente-t-il la taille du fichier ?

Oui, l'encodage Base64 augmente la taille d'environ 33%. Pour les petites images (icônes, logos sous 10KB), c'est bien. Pour les images plus grandes, envisagez d'abord de compresser avec notre outil principal.

Y a-t-il une limite de taille de fichier ?

Les fichiers individuels sont limités à 25MB pour garder le navigateur fluide. Pour de meilleurs résultats avec Base64, utilisez des images de moins de 100KB pour éviter de gonfler votre HTML/CSS.

Besoin de fichiers plus petits d'abord ?

Compressez les images avant l'encodage pour des intégrations plus rapides et de meilleures performances.