L'encodage Base64 permet d'intégrer des images directement dans le code source HTML, CSS ou JavaScript sous forme de texte. C'est une technique populaire en développement web pour réduire le nombre de requêtes HTTP et accélérer le chargement des petites images.
Qu'est-ce que l'encodage Base64 ?
Le Base64 est un système d'encodage qui convertit des données binaires (comme une image) en une chaîne de caractères ASCII. Le résultat est un texte composé de lettres (A-Z, a-z), de chiffres (0-9) et de quelques symboles (+, /, =). L'image encodée est environ 33% plus volumineuse que l'originale, mais peut être intégrée directement dans le code via un Data URI (data:image/png;base64,...).
Cas d'usage
Intégration CSS
Utilisez des images Base64 comme background-image en CSS pour éviter une requête HTTP supplémentaire.
Emails HTML
Les images Base64 s'affichent directement dans les emails sans être bloquées par les clients de messagerie.
Applications SPA
Intégrez de petites icônes directement dans le bundle JavaScript de votre application.
Exemples concrets
| Entrée | Résultat |
|---|---|
| Icône 2 Ko | Chaîne ~2.7 Ko |
| Logo 10 Ko | Chaîne ~13.3 Ko |
| Photo 500 Ko | Chaîne ~667 Ko |
Erreurs fréquentes
❌ Encoder des images volumineuses en Base64
✅ Le Base64 ajoute 33% de poids. Pour les images > 10 Ko, préférez un fichier externe.
❌ Oublier le préfixe Data URI
✅ Pour utiliser en HTML/CSS, il faut le préfixe complet : data:image/png;base64,DONNEES...
Conseils d'expert
- 💡Utilisez le Base64 uniquement pour les images < 10 Ko (icônes, petits logos)
- 💡Les navigateurs mettent en cache les fichiers externes mais pas le Base64 inline
- 💡Le SVG est souvent un meilleur choix que le PNG+Base64 pour les icônes
Questions supplémentaires
Le Base64 est-il plus rapide ?▼
Le Base64 est-il sécurisé ?▼
Notez l'outil « Qu'est-ce que l'encodage Base64 ? »