Qu'est-ce que l'encodage Base64 des images ?
L'encodage Base64 transforme des données binaires (comme une image) en une chaîne de caractères ASCII. Chaque groupe de 3 octets est converti en 4 caractères parmi A-Z, a-z, 0-9, + et /. Le résultat est environ 33 % plus volumineux que le fichier original, mais il peut être intégré directement dans du HTML, du CSS ou du JSON sous forme de Data URI (data:image/png;base64,...). C'est couramment utilisé pour les petites icônes, les favicons et les images inline dans les emails HTML.
Quand utiliser des images en Base64 ?
Les images Base64 sont utiles pour les petites images (moins de 10 Ko) intégrées directement dans le CSS ou le HTML, ce qui évite une requête HTTP supplémentaire. Elles sont aussi utilisées dans les API REST qui retournent des avatars ou des vignettes, dans les emails HTML ou les images doivent être auto-contenues, et dans les applications offline qui stockent des images en base de données. Au-delà de 10 Ko, il est préférable d'utiliser des fichiers image classiques car le Base64 augmente la taille de 33 %.
Déboguer les images Base64
Lors du développement, vous pouvez rencontrer des images Base64 dans les réponses API, les fichiers CSS ou les attributs src des balises img. Si l'image ne s'affiche pas, les causes courantes sont : un préfixe data URI manquant ou incorrect (data:image/png;base64,), des caractères de saut de ligne dans la chaîne, un encodage tronqué (le nombre de caractères doit être un multiple de 4, complété par des =). Notre décodeur vous aide à identifiér ces problèmes en affichant l'image ou un message d'erreur explicite.