Image en Base64 Encodage Guide Complet

L'encodage Base64 convertit les données binaires d'image en une chaîne de texte de 64 caractères ASCII imprimables. Cela permet d'intégrer des images directement dans HTML, CSS et JSON sans références à des fichiers externes.

La technique est largement utilisée pour les petites icônes, les modèles d'e-mail et les applications offline. Comprendre quand Base64 aide et quand il nuit aux performances est essentiel.

Qu'est-ce que l'encodage Base64

Base64 est un schéma d'encodage binaire-vers-texte utilisant 64 caractères : A–Z, a–z, 0–9, + et /. Chaque groupe de 3 octets de données binaires correspond à 4 caractères Base64. Les images encodées en Base64 peuvent être incluses dans HTML comme data URIs ou en CSS comme valeurs background-image.

Comment fonctionne l'encodage Base64

L'encodeur lit l'image comme des octets bruts, les divise en groupes de 6 bits et mappe chaque groupe sur l'un des 64 caractères. La sortie se termine par = ou == comme remplissage. Un fichier PNG de 1Ko devient environ 1,37Ko de texte Base64.

Base64 en HTML et CSS

Une image encodée en Base64 peut être utilisée partout où une URL est attendue. En HTML comme src d'img, en CSS comme background-image. Le format data URI est :

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;

Surcharge et performance

Base64 ajoute environ 33% de surcharge. Un PNG de 10Ko devient ~13,3Ko en Base64. Cependant, l'intégration élimine la requête HTTP — pour les petits fichiers (< 5Ko), ce compromis est favorable. Pour les images plus grandes, la surcharge l'emporte. Les chaînes Base64 ne sont pas séparément mises en cache.

Quand utiliser des images Base64

Utilisez Base64 pour : petites icônes et favicons (< 5Ko) en CSS ; modèles d'e-mail où les images externes peuvent être bloquées ; PWA hors ligne ; fichiers SVG avec textures bitmap ; payloads JSON. Évitez pour : images > 10Ko, images changeant fréquemment, images bénéficiant du cache CDN.

Limitations et alternatives

Limitations : pas de mise en cache séparée, augmentation de 33%, longues chaînes dans le code source. Alternatives : sprites CSS, multiplexage HTTP/2, SVG inline. Pour les e-mails, utilisez des images hébergées sur CDN quand les chaînes Base64 sont trop longues.

FAQ

Qu'est-ce que l'encodage Base64 d'images ? +

L'encodage Base64 convertit les données binaires d'image en une chaîne de texte imprimable de 64 caractères ASCII, permettant d'intégrer des images dans HTML, CSS ou JSON sans fichiers séparés.

Combien de fois plus grande est une image Base64 ? +

Base64 ajoute environ 33% de surcharge. Un PNG de 10Ko devient ~13,3Ko de texte Base64.

Comment utiliser une image Base64 en HTML ? +

Comme data URI dans l'attribut src : . Le même format fonctionne en CSS comme background-image.

Base64 fonctionne-t-il avec tous les formats d'image ? +

Oui. Le type MIME dans le data URI spécifie le format : image/png, image/jpeg, image/gif, image/webp, image/svg+xml.

Dois-je utiliser Base64 pour les grandes images ? +

Non. Pour les images > 5–10Ko, la surcharge de 33% dépasse les économies de requêtes HTTP. N'utilisez Base64 que pour les petites icônes et les espaces réservés.

Les images Base64 sont-elles mises en cache par les navigateurs ? +

Pas séparément. La chaîne Base64 fait partie du fichier HTML ou CSS et est mise en cache dans ce fichier.

Puis-je utiliser des images Base64 dans les e-mails ? +

Oui. Certains clients e-mail bloquent les images externes mais rendent toujours les Base64 inline. Cependant, ils augmentent considérablement la taille de l'e-mail.