Convertisseur image en Base64
Transformez une image en texte Base64 à coller dans votre code.
Le texte Base64 est environ 37 % plus volumineux que le fichier d'origine. Il convient bien aux petites icônes, pas aux photos complètes.
Fonctionne dans votre navigateur. Vos fichiers ne quittent jamais votre appareil.
- Sortie en URL de données, CSS et HTML
- Fonctionne avec tout type d'image
- Rien n'est envoyé
Comment convertir une image en Base64
- Déposez une image ici, ou appuyez sur Choisir des fichiers.
- Copiez l'URL de données, le Base64 brut, ou un extrait CSS ou HTML prêt à l'emploi.
- Collez-le dans votre code.
Comment fonctionne l'encodage
Base64 transforme chaque groupe de 3 octets de l'image en 4 caractères de texte, en utilisant les 64 caractères de A à Z, de a à z, de 0 à 9, plus le signe plus et la barre oblique, l'alphabet standard de la RFC 4648.
Une URL de données est ce texte précédé d'un court préfixe, comme data:image/png;base64, pour qu'un navigateur ou une application sache de quoi il s'agit sans fichier séparé.
| Fichier d'origine | Texte Base64 (environ 37 % plus volumineux) |
|---|---|
| Icône de 5 KB | Environ 6,9 KB |
| Logo de 20 KB | Environ 27 KB |
| Photo de 100 KB | Environ 137 KB |
Cette surcharge explique pourquoi les URL de données conviennent surtout aux petits graphiques, pas aux photos complètes.
Où sont utilisées les URL de données
- En CSS, dans background-image, pour qu'une petite icône se charge avec la feuille de style au lieu d'une requête séparée.
- En HTML, dans un attribut img src ou un balisage SVG en ligne.
- Dans les réponses d'API en JSON et les champs de base de données qui stockent une image sous forme de texte.
- Dans le HTML des e-mails, car certains clients de messagerie bloquent les images liées mais autorisent les données en ligne.
Quand garder un fichier normal
Les URL de données ne sont pas mises en cache séparément de la page qui les contient, donc une photo utilisée sur dix pages est téléchargée dix fois au lieu d'une seule. Pour tout ce qui dépasse une petite icône, un fichier image normal avec la mise en cache du navigateur se charge plus vite.
FAQ Image en Base64
Qu'est-ce qu'une URL de données Base64 ?
Ce sont les octets d'une image écrits sous forme de texte, pour pouvoir coller une image directement dans du HTML, du CSS ou du JSON sans fichier séparé.
Est-ce que le Base64 alourdit le fichier ?
Oui, d'environ 37 pour cent, car l'encodage transforme chaque groupe de 3 octets de l'image en 4 caractères de texte.
Quand utiliser une URL de données plutôt qu'un fichier ?
Pour les petites icônes et les graphiques simples, quand économiser une requête réseau compte plus que le poids de la page. Pour les photos, gardez un fichier image classique.
Mon image est-elle envoyée quelque part ?
Non. L'encodage se fait dans votre navigateur, l'image ne quitte donc jamais votre appareil.
La conversion en Base64 change-t-elle la qualité de l'image ?
Non. Les données des pixels ne sont pas touchées, seulement réécrites en texte, donc le décodage vous redonne exactement les octets d'origine.
Y a-t-il une taille maximale pour une URL de données ?
Les navigateurs n'imposent pas de limite stricte, mais une URL de données très longue ne peut pas être mise en cache séparément et ralentit l'affichage, donc réservez-les aux petites icônes et graphiques.
Tous les navigateurs prennent-ils en charge les URL de données ?
Oui. Les URL de données fonctionnent dans tous les grands navigateurs depuis Internet Explorer 8, y compris tous les navigateurs mobiles actuels.
Puis-je m'en servir pour un favicon ?
Un petit favicon peut être intégré en URL de données dans le head du HTML, même si un fichier favicon.ico classique avec les tailles PNG reste la configuration la plus courante.