Convertir une image en Base64
Transformez une image en data URI à coller directement dans du CSS, du HTML ou du JSON.
Déposez une image pour commencer
Fonctionne dans votre navigateur. Aucun envoi.
Un data URI, c'est l'image elle-même écrite sous forme de texte : une feuille de style ou un gabarit peut donc la transporter au lieu de pointer vers un fichier. Cela retire une requête à la page et un fichier au déploiement, ce qui explique que les petites icônes, les cales et les signatures d'e-mail soient si souvent intégrées ainsi.
Quatre formes sortent du même encodage, parce que ce sont les quatre endroits où on le colle. Le data URI seul va dans un champ JSON ou dans un attribut `src` écrit à la main ; la règle CSS et la balise img arrivent avec leur syntaxe déjà correcte ; et le Base64 brut, sans le préfixe `data:`, est ce qu'attend une API qui veut une chaîne nue.
Le prix, c'est la taille : le Base64 dépense quatre caractères pour trois octets, donc le texte est environ un tiers plus gros que le fichier d'origine, et il se trouve sur le chemin critique du document qui le porte au lieu d'être mis en cache séparément. En dessous de quelques kilooctets l'échange vaut généralement le coup, au-dessus de la centaine généralement pas — le panneau affiche les deux chiffres, pour que le choix ne soit pas une intuition.
Étape par étape
- 1Déposez l'image ici.
- 2Choisissez la forme qu'il vous faut : le data URI, une règle CSS, une balise img ou le Base64 brut.
- 3Appuyez sur Copier et collez là où il faut.
Questions
Qu'est-ce qu'un data URI ?
Une URL qui contient le fichier au lieu de pointer dessus. Elle commence par `data:`, annonce le type de média et transporte les octets encodés en Base64 : tout ce qui accepte une URL accepte donc l'image elle-même.
Pourquoi le Base64 est-il plus gros que mon image ?
Encoder du binaire en texte coûte environ 33 %, puisque trois octets deviennent quatre caractères imprimables. La compression sur le réseau en récupère une partie, mais le texte reste toujours plus gros que le fichier.
Quand vaut-il mieux ne pas intégrer une image ?
Quand elle est volumineuse, quand plusieurs pages l'utilisent, ou quand elle change souvent. Une image intégrée ne peut pas être mise en cache séparément et est retéléchargée avec chaque copie du document qui la porte.
Mon image est-elle envoyée quelque part pour être encodée ?
Non. Le fichier est lu par le navigateur et transformé en texte dans cet onglet. Rien n'est envoyé nulle part, ce qui explique aussi que cela fonctionne sans connexion une fois la page chargée.