Ce qu'est le Base64
Le Base64 est une manière d'écrire des données binaires avec des caractères ordinaires : des lettres, des chiffres et quelques symboles. Une image encodée ainsi devient une longue chaîne que vous pouvez placer dans un URI de données, par exemple dans une balise img ou dans un arrière-plan CSS.
Un URI de données commence par un court préfixe qui indique le type de fichier, suivi du texte encodé. Le navigateur le décode et affiche l'image sans faire de requête distincte pour un fichier.
Bons usages
- Très petites icônes ou images de remplacement qui évitent une requête supplémentaire
- E-mails HTML ou pages en un seul fichier où les fichiers externes sont peu pratiques
- Données de test, exemples de documentation et charges JSON, où une référence à un fichier ne serait pas disponible
- Petites images dans une feuille de style qui doit fonctionner sans aucun autre fichier
Inconvénients
Le texte est environ un tiers plus gros que le fichier d'origine. Le navigateur ne peut pas mettre en cache une image intégrée séparément de la page : elle est donc retéléchargée à chaque fois que le HTML ou le CSS l'est. Les longues chaînes alourdissent aussi l'analyse du HTML et du CSS et les rendent plus difficiles à lire et à modifier.
Certains programmes de messagerie bloquent ou limitent les images intégrées : testez donc avant de vous y fier dans une newsletter.
En règle générale, n'intégrez que de petites images, jusqu'à quelques kilo-octets. Servez tout ce qui est plus gros comme un fichier normal, qui peut être mis en cache, compressé et chargé en différé. Les serveurs modernes permettent aussi à plusieurs fichiers de circuler sur une même connexion : le gain obtenu en évitant une requête est donc souvent plus faible qu'autrefois.
Un exemple concret (à titre d'illustration)
Supposons une icône de flèche de 2 KB utilisée dans un seul bouton. Une fois encodée, elle représente environ 2,7 KB de texte dans votre CSS. C'est acceptable, et vous économisez une requête.
Supposons maintenant que vous intégriez une photo de 300 KB. Le texte atteint environ 400 KB dans votre HTML. À chaque visite, il faut télécharger et analyser l'ensemble avant que la page puisse s'achever, et la photo ne peut pas être mise en cache à part. Un fichier normal, compressé au préalable, est le meilleur choix.
Marche à suivre étape par étape
- Rendez d'abord l'image aussi petite que possible : redimensionnez-la et compressez-la.
- Vérifiez le poids final du fichier. S'il dépasse quelques kilo-octets, envisagez plutôt un fichier normal.
- Convertissez-la en Base64 et choisissez la sortie voulue : URI de données, balise HTML img, arrière-plan CSS ou Base64 brut.
- Collez-la dans votre page, votre feuille de style ou votre JSON.
- Ouvrez la page et confirmez que l'image s'affiche.
Erreurs courantes
- Intégrer de grandes photos, ce qui gonfle la page.
- Encoder une image avant de l'optimiser, ce qui intègre des octets inutiles.
- Répéter la même longue chaîne à plusieurs endroits au lieu de la définir une seule fois, par exemple dans une classe CSS.
- Oublier le préfixe de l'URI de données quand on utilise du Base64 brut dans du HTML ou du CSS.
- Considérer le Base64 comme une forme de sécurité. Ce n'est qu'un encodage et n'importe qui peut le décoder.
- Coller une très longue chaîne à un endroit qui limite la longueur des lignes ou la taille des champs, ce qui peut tronquer l'image.
Liste de contrôle rapide
- L'image ne pèse-t-elle que quelques kilo-octets ?
- Est-elle déjà redimensionnée et compressée ?
- A-t-elle vraiment besoin d'éviter un fichier séparé ?
- Avez-vous testé le résultat à l'endroit où il sera utilisé ?
- L'image sera-t-elle réutilisée sur plusieurs pages ? Si oui, un fichier normal est probablement préférable.
Le faire avec DoneImg dans votre navigateur
Ouvrez l'outil Base64 et ajoutez votre image. Choisissez la sortie voulue : un URI de données, une balise HTML img prête à l'emploi, une règle d'arrière-plan CSS ou le texte Base64 brut, puis copiez-la. Si la chaîne vous paraît très longue, revenez en arrière et utilisez d'abord les outils de redimensionnement et de compression.
La conversion s'effectue dans votre navigateur : l'image n'est donc jamais envoyée et reste sur votre appareil.
Questions fréquentes
Le Base64 rend-il une image plus petite ?
Non. Il rend les données environ un tiers plus grosses, car il stocke le fichier sous forme de texte.
Puis-je retransformer du Base64 en image ?
Oui. Le Base64 est réversible, et les navigateurs décodent automatiquement un URI de données.
Le Base64 convient-il pour un logo dans l'en-tête de mon site ?
Généralement non. Un logo qui apparaît sur chaque page est préférable sous forme de fichier normal ou de SVG, pour que le navigateur le mette en cache une fois et le réutilise partout.
Quel type de fichier dois-je encoder ?
Utilisez ce qui est le plus petit pour l'image : SVG pour les formes simples, WebP ou PNG pour les petits graphismes, et JPG ou WebP pour les photos. L'encodage ne change pas l'image, seulement la façon dont elle est écrite.