Image vers Base64

Sélectionnez un fichier image pour le convertir en chaîne encodée en Base64. Activez le préfixe d’URI de données pour obtenir une sortie CSS/HTML prête à l’emploi. Tout le traitement s’effectue dans votre navigateur.

Image preview

À propos d'Image vers Base64

Cet outil convertit les images en chaînes encodées en Base64 entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

  • Data URI : Avec le préfixe activé, la sortie est prête à être utilisée dans CSS background-image ou HTML <img src="...">.
  • Base64 brut : Sans le préfixe, vous obtenez la chaîne encodée brute.
  • Supporte JPEG, PNG, GIF, WebP, SVG et les autres formats d'image pris en charge par le navigateur.

Intégrer une image en data URI supprime une requête et ajoute environ un tiers à sa taille, car le base64 exige quatre caractères pour trois octets. L'échange vaut le coup pour un petit élément toujours nécessaire, pas pour une photographie. Une image intégrée ne peut pas non plus être mise en cache séparément : elle est retéléchargée avec chaque copie du fichier qui la porte.

Outils liés

Encodage Base64 Générateur de QR Code Convertisseur de couleurs

Le balisage vous résiste ?

Des entités échappées, des encodages abîmés et un contenu qui s'affiche d'une façon dans le CMS et d'une autre sur la page signifient en général que quelque chose devine dans la chaîne. Nous construisons les interfaces et le chemin de publication derrière elles, pour que le visiteur voie ce que vous avez écrit.

Parlons de votre site

Questions fréquentes

Quand un data URI en vaut-il la peine ?
Pour de petites images nécessaires tout de suite : une icône, un séparateur, un logo dans un courriel HTML où les images externes sont bloquées par défaut. La règle est de quelques kilo-octets ; au-delà, le surpoids l'emporte.
Pourquoi la version encodée est-elle plus grosse ?
Le base64 représente trois octets par quatre caractères : le résultat est un tiers plus lourd avant même le préfixe. La compression en récupère une part en transit, mais le navigateur garde la forme longue dans le document.
Cela nuit-il à la mise en cache ?
Oui, et c'est le point qu'on oublie. Un fichier image séparé est mis en cache une fois et réutilisé ; une image intégrée fait partie du fichier et est retéléchargée à chaque modification de celui-ci.
Quels formats puis-je intégrer ?
Tous, le base64 étant indifférent au contenu. Le SVG est le cas intéressant : c'est déjà du texte, l'intégrer en data URI est donc souvent plus lourd que de placer le SVG directement.
Mon image est-elle téléversée ?
Non. Le fichier est lu par votre navigateur et encodé dans la page : il ne quitte jamais votre machine. Cela compte quand l'image est une capture d'écran de quelque chose d'interne, ce qui est le cas la plupart du temps.