Pourquoi le Base64 s’allonge
Le Base64 transpose trois octets en quatre caractères : le texte obtenu est donc environ un tiers plus long que le fichier d’origine. Le préfixe data:image/png;base64, et les retours à la ligne ajoutent encore un peu. Une image de 5 Mo donne une chaîne d’environ 6,7 Mo.
Où une data: URI est utile
Là où l’on ne peut pas déposer de fichier à côté du balisage : un background-image en CSS, un <img src> en HTML, une signature de courriel qui doit transporter sa propre image. Intégrer quelques icônes minuscules évite en plus quelques requêtes.
Quand l’éviter
Une data: URI n’a pas d’adresse propre : rien ne peut la désigner ni la réutiliser. Chaque page qui a besoin de la même image en transporte sa propre copie, et remplacer cette seule image invalide le cache de toute la feuille de style qui la contient. Intégrée directement dans le HTML, c’est pire encore : le HTML n’est en général pas mis en cache et ces octets repartent à chaque visite. Pour une grande photo, garder le fichier et poser un lien reste plus rapide. L’intégration demeure confortable jusqu’à des icônes d’environ un kilo-octet.
La variante URL-safe
Le Base64 standard utilise + et /. Ces deux caractères ont un autre sens dans une URL ou un nom de fichier : les adresses emploient donc l’alphabet URL-safe avec - et _, en général sans le remplissage = final. Les JWT sont encodés ainsi. Cet outil accepte les deux formes.