Convertissez des images en Base64 - instantané, confidentiel, prêt à copier.

Base64 est un encodage binaire-vers-texte qui représente des données binaires en utilisant 64 caractères ASCII (A-Z, a-z, 0-9, +, /). Il convertit chaque 3 octets de données binaires en 4 caractères ASCII. Une icône de 3 Ko devient une chaîne texte de 4 Ko. L'encodage existe parce que de nombreux systèmes - e-mail (SMTP), API JSON, valeurs CSS url(), attributs HTML - n'acceptent que du texte, pas du binaire brut. Base64 comble ce fossé en transformant n'importe quel fichier en une représentation textuelle sûre.

Utilisez Base64 pour les images de moins de 10 Ko - favicons, petites icônes, logos simples, pixels de suivi 1x1 et petits éléments d'interface. À cette taille, le coût de la requête HTTP (recherche DNS, handshake TCP, négociation TLS) coûte plus que l'augmentation de 33 % de la taille due au Base64. Pour les images de plus de 10 Ko, les fichiers externes sont meilleurs car les navigateurs peuvent les mettre en cache indépendamment, les charger en parallèle et éviter de gonfler votre CSS ou HTML. Les templates d'e-mail HTML sont l'exception - inlinez toujours en Base64 car les clients de messagerie bloquent le chargement des images externes par défaut.

Base64 augmente la taille du fichier de exactement 33 % (ratio 4/3) plus quelques octets de rembourrage. Un PNG de 9 Ko devient une chaîne Base64 de 12 Ko. Un JPG de 30 Ko devient 40 Ko de texte. Ce surcoût se compose quand la chaîne Base64 se trouve dans un fichier CSS ou HTML qui est aussi compressé en gzip pour le transfert - gzip récupère une partie du gonflement (généralement 10-15 %), mais la taille décodée dans le DOM du navigateur est toujours les 33 % complets en plus. Pour un data URI, ajoutez encore 20-30 octets pour le préfixe data:image/png;base64,.

Un data URI inclut un en-tête qui indique au navigateur comment interpréter les données : data:image/png;base64,iVBORw0KGgo... L'en-tête spécifie le type MIME (image/png) et l'encodage (base64). Le Base64 brut est juste la chaîne encodée sans l'en-tête : iVBORw0KGgo... Utilisez les data URI dans les valeurs CSS background-image url() et les attributs HTML src. Utilisez le Base64 brut pour envoyer des données d'image aux API qui attendent la charge utile sans le préfixe data URI, ou pour stocker dans des bases de données où le type MIME est suivi séparément.

Gardez les images Base64 sous 10 Ko (taille du fichier original) pour l'intégration CSS. Google Lighthouse signale le CSS bloquant le rendu, et une image Base64 de 100 Ko dans votre feuille de style ajoute 133 Ko de texte non compressé à chaque chargement de page. Pour les balises img HTML en ligne, 20-30 Ko est une limite supérieure raisonnable - au-delà, le document HTML devient trop lourd pour un First Contentful Paint rapide. Les templates d'e-mail peuvent aller plus haut (jusqu'à 100 Ko par image) car il n'y a pas d'alternative de fichier externe, mais gardez la taille totale de l'e-mail sous 102 Ko pour éviter le découpage de Gmail.

Tous les navigateurs modernes supportent les data URI - Chrome, Firefox, Safari, Edge et tous les navigateurs mobiles depuis 2012. Internet Explorer 8 a ajouté un support partiel avec une limite de 32 Ko par data URI. IE 9+ a supprimé cette limite. La seule restriction pratique aujourd'hui est que certaines configurations de Content Security Policy (CSP) bloquent les URI data: par défaut. Si votre site utilise un CSP strict, ajoutez data: à la directive img-src pour autoriser les images Base64 en ligne.

Aucune image ne quitte votre appareil. La conversion utilise l'API FileReader du navigateur pour lire le fichier localement et produire la chaîne Base64 entièrement en JavaScript. Ouvrez les outils de développement de votre navigateur (F12), passez à l'onglet Réseau et convertissez une image - vous verrez zéro requête sortante. L'outil fonctionne sur du HTML et JavaScript statique sans backend serveur. Fermez l'onglet et toutes les données sont effacées de la mémoire.

Oui, mais SVG est déjà du XML basé sur du texte, donc l'encodage Base64 d'un SVG est souvent inutile. Un data URI SVG brut (data:image/svg+xml,...) sans Base64 est généralement 20-30 % plus petit car vous évitez le surcoût d'encodage de 33 %. Cet outil fournit la version Base64 pour la compatibilité avec les systèmes qui nécessitent du Base64, mais pour les images d'arrière-plan CSS, envisagez d'utiliser le SVG brut dans un url() avec l'encodage en pourcentage. La version Base64 fonctionne partout, tandis que la version non encodée échoue dans certains anciens clients de messagerie.