Convertir une image en Base64 (data URI)

Importez une image et obtenez directement une chaîne data:image/...;base64,... prête à coller dans du CSS ou du HTML, pour intégrer une petite icône sans requête réseau supplémentaire.

Exemple :

Comment ça marche

Vous voulez intégrer une petite icône, un logo ou un pictogramme directement dans une feuille de style CSS (par exemple en background-image) ou dans du HTML, sans ajouter un fichier séparé ni une requête réseau supplémentaire ? Importez votre image : elle est encodée en une chaîne Base64 précédée du bon préfixe data:image/png;base64, (ou jpeg, gif, webp... selon le format détecté), directement utilisable comme valeur d'URL dans votre code.

Quand utiliser une image en Base64 plutôt qu'un fichier séparé ?

C'est surtout pertinent pour de très petites images (icônes, pictogrammes, petits logos) : cela évite une requête HTTP supplémentaire et peut simplifier le déploiement d'un composant autonome. Pour des photos ou images plus lourdes, un fichier séparé reste préférable : le Base64 augmente la taille d'environ 33% et n'est pas mis en cache indépendamment par le navigateur.

Le format de l'image est-il détecté automatiquement ?

Oui. L'outil analyse les premiers octets du fichier importé pour déterminer son format réel (PNG, JPEG, GIF, WebP...) et l'inscrit dans le préfixe de la chaîne générée, sans se fier à l'extension du nom de fichier.

Traitement 100% local dans votre navigateur (WebAssembly) — votre image n'est jamais envoyée à un serveur.