Image vers Base64

Transformez n’importe quelle image en data URI, avec extraits HTML et CSS prêts à coller.

Glissez-déposez vos images ici
ou cliquez pour choisir des fichiers — le collage depuis le presse-papiers fonctionne aussi

Une data URI Base64 intègre une image directement dans votre code sous forme de texte, supprimant une requête HTTP. C’est une technique populaire pour les petites icônes, logos et graphiques d’attente en CSS, dans les e-mails HTML et les démos monofichiers.

Déposez une image et la data URI est générée instantanément — aucun bouton nécessaire. En plus de la chaîne Base64 brute, vous obtenez des extraits prêts à coller pour une balise <img> HTML et une propriété CSS background-image, plus une comparaison de taille montrant les ~33 % de surcoût du Base64.

L’encodage étant une pure transformation de texte, il s’effectue sur votre appareil en quelques millisecondes. Icônes, avatars et captures d’écran ne touchent jamais un serveur.

Mode d’emploi

  1. Déposez ou collez une image (une à la fois, c’est plus pratique pour copier).
  2. Copiez la data URI, ou récupérez l’extrait HTML ou CSS pré-construit.
  3. Collez-le dans votre code — c’est tout. Aucun hébergement requis.

Pourquoi cet outil ?

Questions fréquentes

Quand utiliser des images Base64 ?
Pour les petites ressources de 5 à 10 Ko environ : icônes discrètes, puces, logos simples. Là, la requête HTTP économisée compense les 33 % de surcoût. Pour les photos ou tout ce qui est plus grand, servez un vrai fichier compressé — le Base64 le gonflerait et casserait le cache.
Pourquoi la version Base64 est-elle plus grosse que mon fichier ?
Le Base64 encode 3 octets binaires en 4 caractères de texte, soit environ 33 % de plus. La compression Gzip côté serveur en récupère une partie, mais la forme encodée reste plus lourde que les octets d’origine.
Les images Base64 fonctionnent-elles dans les e-mails ?
Le support est inégal. Par sécurité, beaucoup de clients de messagerie suppriment ou bloquent les data URI. Pour les campagnes d’e-mails, hébergez normalement vos images.
Y a-t-il une limite de taille ?
Techniquement non, mais les chaînes de plusieurs mégaoctets ralentissent navigateurs et éditeurs dans un textarea. L’outil gère confortablement icônes et graphiques de taille moyenne ; les très grandes photos méritent un vrai lien de fichier.