Images Base64 : Piège pratique ou outil utile ?
Intégrer des images en tant que chaînes Base64 semble pratique. Voici quand ça aide et quand ça nuit.
Tu peux intégrer une image directement dans HTML ou CSS. Pas de fichier séparé. Pas de requête HTTP supplémentaire.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
Pratique. Mais ça vient avec des coûts qui ne sont pas immédiatement évidents.
Comment ça fonctionne
Le Base64 encode les données binaires en texte ASCII. N'importe quelle image devient une chaîne que tu peux copier et coller.
La chaîne est environ 33% plus grande que le fichier original. Une image de 30KB devient une chaîne de 40KB.
Quand le Base64 aide
Petites icônes. Une icône de 200 octets en Base64 économise une requête HTTP. HTTP/2 a rendu cela moins important, mais c'est toujours valable pour les très petites images.
HTML d'email. Les clients email bloquent les images externes. Les images intégrées s'affichent sans cette invite "charger les images".
Distribution en fichier unique. Partager du HTML qui fonctionne hors ligne. Tout dans un seul fichier.
URIs de données en CSS. Images de fond intégrées dans les feuilles de style. Réduit les requêtes HTTP au prix de fichiers CSS plus gros.
Quand le Base64 nuit
Grandes images. L'augmentation de 33% de la taille s'additionne. Une image de 100KB devient 133KB de texte.
Mise en cache. Les images externes sont mises en cache séparément. Les images Base64 font partie du HTML/CSS—si la page change, tout se recharge.
Temps d'analyse. Les navigateurs doivent décoder le Base64 avant le rendu. Plus de traitement que charger un fichier binaire directement.
Maintenance. Mettre à jour une image intégrée signifie modifier du code. Mettre à jour un fichier externe est plus simple.
Le facteur HTTP/2
HTTP/1.1 avait un coût de connexion élevé. Plusieurs petites images signifiaient plusieurs requêtes lentes.
HTTP/2 multiplexe les requêtes efficacement. L'argument "économiser des requêtes HTTP" est plus faible maintenant.
Si ton serveur supporte HTTP/2 (la plupart le font), les images externes sont généralement meilleures.
Directives pratiques
Moins de 1KB : Considère le Base64. Le surcoût est minimal.
1-10KB : Évalue au cas par cas. Les icônes critiques pourraient bénéficier, les images décoratives probablement pas.
Plus de 10KB : Utilise des fichiers externes. La pénalité de taille n'en vaut pas la peine.
Fréquemment mises à jour : Fichiers externes. Évite de changer du code pour des mises à jour d'images.
Partagées sur plusieurs pages : Fichiers externes. Les avantages de la mise en cache sur plusieurs chargements de page.
Tests de performance
Ne devine pas. Teste.
Compare le poids total de la page avec et sans intégration Base64. Mesure les temps de chargement réels.
La "bonne" réponse dépend de ta situation spécifique—tailles d'images, stratégie de mise en cache, version HTTP, fréquence de mise à jour.
Alternatives
Sprite sheets. Combine de petites icônes en une seule image, utilise CSS pour afficher des portions. Une requête, mise en cache normale.
Polices d'icônes. Icônes vectorielles en tant que polices. Évolutives, stylisables avec CSS.
SVG inline. Pour les graphiques vectoriels, le SVG inline offre plus de flexibilité que le PNG Base64.
Les images Base64 échangent la taille du fichier contre la commodité. Cet échange n'a de sens que pour de très petites images ou des cas spéciaux comme l'email. Pour la plupart des utilisations web, les fichiers externes fonctionnent mieux.