§

Déposez une image ou cliquez pour choisir

PNG, JPEG, GIF, WebP, SVG, BMP — jusqu'à 30 Mo. Une image à la fois.

L'image est lue et encodée entièrement sur votre appareil — elle ne quitte jamais votre navigateur.

Les équipes web françaises intègrent depuis longtemps des images en URI de données pour alléger le chemin critique de rendu. Sous Symfony ou Laravel déployés chez OVHcloud ou Scaleway, Vite et webpack inlinent automatiquement les ressources inférieures au seuil d'octets configuré. Dans l'email marketing, les plateformes comme Brevo (ex-Sendinblue) ou Mailjet intègrent les logos en Base64 pour qu'ils s'affichent même quand le client de messagerie bloque le chargement des images distantes — pratique courante pour les campagnes B2B envoyées via les serveurs conformes à la réglementation française. Les services publics numériques construits selon le Système de Design de l'État utilisent également des pictogrammes inline pour réduire les requêtes. Et comme l'encodage tourne en JavaScript sans quitter le navigateur, le fichier source — y compris captures d'écran ou pièces d'identité contenant des données personnelles — ne touche jamais un serveur, ce qui facilite la conformité au RGPD.

// Outils Connexes

./base64-encoder
Encodeur Base64
Encodez du texte et des fichiers au format Base64.
→
./image-format-converter
Convertisseur de Format d’Image
Convertissez PNG, JPEG et WebP localement — sans envoi, prise en charge par lot.
→
./image-compressor
Compresseur d'images
Compressez des images JPEG, PNG et WebP localement — qualité ou taille cible, sans envoi.
→
./
Tous les outils
Découvrez l'ensemble des outils en ligne Ultim8Soft.
→

Comment fonctionne la conversion image en Base64

La conversion entière s'exécute dans votre navigateur via la File API et la fonction native btoa — aucune bibliothèque de codec n'est téléchargée et aucun serveur ne voit l'image. Voici le processus, du début à la fin :

  1. Vous déposez ou sélectionnez une image. Le navigateur la lit comme un Blob depuis votre disque local, sans copier les octets vers un serveur.
  2. Le fichier est lu par blocs de 1 Mo et les octets de chaque bloc sont ajoutés à une chaîne binaire. Le traitement par blocs empêche les grandes images de provoquer un dépassement de la pile d'appels JavaScript.
  3. La chaîne binaire est passée à btoa, qui mappe chaque groupe de trois octets sur quatre caractères Base64 tirés de l'alphabet A–Z, a–z, 0–9, plus /.
  4. Le type MIME du fichier (image/png, image/jpeg, etc.) est lu depuis l'objet File et ajouté en préfixe data:, produisant une URI data:image/…;base64,… complète.
  5. La page assemble quatre sorties à partir de cette URI — l'URI de données complète, le Base64 brut sans préfixe, une balise prête à coller et un extrait CSS background-image — chacune avec son propre bouton de copie.

Pourquoi encoder une image en URI de données ?

  • Intégrer un petit logo ou icône en URI de données supprime une requête réseau supplémentaire, de sorte que la page ou l'email affiche son premier rendu un peu plus tôt.
  • Une page ou feuille de style avec ses images inline est autonome. Elle fonctionne hors connexion et vous pouvez la copier sans emporter un dossier de ressources avec elle.
  • De nombreux clients de messagerie bloquent par défaut les images distantes liées. Intégrez un logo en Base64 et il s'affiche dès l'ouverture du message, sans requête distante nécessaire.
  • L'encodage s'effectue entièrement dans votre navigateur, donc les images sensibles ne transitent jamais vers un serveur tiers. Cela concerne les captures d'écran, les numérisations de documents et les diagrammes internes.

Utilisations courantes des images Base64

Les URI de données apparaissent lorsqu'une image est suffisamment petite pour qu'une requête séparée coûte plus que l'inflation de taille d'environ 33% qu'ajoute Base64. Trois modèles reviennent constamment :

  • Icônes CSS inline : un sprite ou icône de 1–2 Ko inséré dans une feuille de style comme background-image: url(data:…) pour que la règle soit entièrement autonome.
  • Signatures d'e-mail et newsletters : un logo intégré comme avec une URI data: src s'affiche même quand le client bloque les images distantes.
  • Intégration dans les outils de build : des bundlers comme Webpack et Vite intègrent automatiquement les ressources sous un seuil d'octets, et cet outil vous permet de prévisualiser exactement à quoi ressemble cette sortie.

À quoi ressemble une image Base64 ?

Prenez un PNG transparent de 1×1 pixel. Ses octets bruts ne font que 67 octets, mais une fois encodé il devient la chaîne iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, et l'URI de données complète est data:image/png;base64,iVBORw0KGgo…. Remarquez que la forme encodée est environ un tiers plus grande que l'original. C'est le compromis pour rendre des données binaires sûres à intégrer directement dans du texte.

Mon image est-elle envoyée quelque part ?

Non. La conversion utilise la File API du navigateur et la fonction native btoa pour encoder l'image entièrement sur votre appareil. Vous pouvez le vérifier vous-même : ouvrez les outils de développement de votre navigateur, passez au panneau Réseau et convertissez une image — les seules requêtes que vous verrez sont le chargement de la page et les publicités. Rien de la forme d'une image n'est envoyé à un serveur, ce qui rend cela sûr pour les captures d'écran, les documents d'identité et les diagrammes internes.

Pourquoi la sortie Base64 est-elle plus grande que mon image d'origine ?

Base64 représente chaque groupe de trois octets de données binaires avec quatre caractères ASCII, donc le texte encodé est environ 33% plus grand que le fichier source. L'indicateur de taille de l'URI de données sur cette page affiche la longueur exacte après inflation. C'est pourquoi les URI de données ne sont utiles que pour les petites images — intégrer une photo de 2 Mo gonflerait votre HTML ou CSS bien plus qu'une requête séparée n'aurait coûté. En règle générale, intégrez les images de moins d'environ 4 Ko et liez à tout ce qui est plus grand.

Quels formats d'image puis-je convertir ?

Tout format que votre navigateur reconnaît comme image fonctionne, car l'outil lit les octets bruts plutôt que de décoder l'image. Cela couvre PNG, JPEG, GIF, WebP, SVG et BMP. Le type MIME est lu directement depuis le fichier, donc le préfixe data: correspond toujours au format réel — un JPEG produit data:image/jpeg et un SVG produit data:image/svg+xml. Le SVG mérite une remarque particulière : c'est déjà du texte, donc pour les SVG une URI de données encodée en URL est souvent plus petite que la version Base64, bien que cet outil émette la forme Base64 par cohérence.

Déposez une image, copiez l'URI de données ou l'extrait dont vous avez besoin, et collez-le dans votre HTML, CSS ou template d'e-mail. Chaque octet reste sur votre appareil. Sans envoi, sans compte, sans requête serveur.