L'encodage Base64 est une technique fondamentale en développement web pour convertir des données binaires en texte ASCII. Utilisé quotidiennement pour les images inline CSS, les pièces jointes email, les JWT, et les API qui échangent des données binaires en JSON.
Comment fonctionne Base64 ?
Base64 divise les données en groupes de 3 octets (24 bits) puis les encode en 4 caractères de 6 bits chacun, choisis parmi 64 caractères (A-Z, a-z, 0-9, +, /). Si les données ne sont pas multiples de 3, des caractères de padding (=) sont ajoutés.
Cas d'usage
Images inline en CSS/HTML
Intégrez de petites images (icônes, logos) directement dans votre CSS avec data:image/png;base64,... pour réduire les requêtes HTTP.
API et transmission de données
Encodez des fichiers binaires pour les transmettre dans du JSON ou des formulaires.
JWT et authentification
Les tokens JWT utilisent Base64URL pour encoder le header et le payload.
Emails et MIME
Les pièces jointes email sont encodées en Base64 pour être transmises en texte.
Exemples concrets
| Entrée | Résultat |
|---|---|
| Hello World | SGVsbG8gV29ybGQ= |
| Bonjour à tous ! | Qm9uam91ciDDoCB0b3VzICE= |
| SGVsbG8= | Hello |
Erreurs fréquentes
❌ Confondre encodage et chiffrement
✅ Base64 n'est PAS du chiffrement. Le contenu est facilement décodable par tous. N'encodez jamais des mots de passe en Base64.
❌ Encoder de grosses images en Base64
✅ Limitez-vous aux images < 10KB. Au-delà, un fichier séparé est plus performant (mise en cache navigateur).
❌ Oublier le padding
✅ Les caractères = en fin de chaîne sont du padding. Ne les supprimez pas sauf pour Base64URL.
Conseils d'expert
- 💡En JavaScript : btoa() pour encoder, atob() pour décoder (ASCII seulement)
- 💡Pour UTF-8 : new TextEncoder().encode() puis conversion manuelle ou Buffer.from(str).toString("base64")
- 💡Base64 augmente la taille d'environ 33% : 3 octets → 4 caractères
- 💡Utilisez Base64URL (- et _ au lieu de + et /) pour les URLs et filenames