Comment convertir une image en data URI base64, et quand s'en abstenir

Transformer un fichier en data URI réussit toujours. C’est bien là le problème : rien dans la conversion ne vous avertit que coller une photo de 200 Ko dans une feuille de style vient de ralentir toutes les pages qui la chargent. L’encodage prend quelques secondes. C’est la décision de l’utiliser ou non qui mérite d’être bien prise.

Deux notions pour commencer

Une data URI est une URI qui contient elle-même les octets d’un fichier au lieu de pointer vers un fichier situé ailleurs. Elle s’écrit data:, suivi du type MIME du fichier, de ;base64, puis des octets encodés : une image PNG commence ainsi par data:image/png;base64,.

Le base64 est l’encodage qui permet de placer sans risque des données binaires dans du texte. Il lit le fichier trois octets à la fois, découpe ces 24 bits en quatre groupes de 6 et écrit chaque groupe sous forme d’un caractère tiré d’un alphabet de 64 (2⁶ = 64). Trois octets en entrée, quatre caractères en sortie, quel que soit le contenu.

Convertir le fichier

1. Ouvrez le convertisseur de data URI et appuyez sur « Choose a file » (choisir un fichier), ou déposez le fichier n’importe où sur la page. Il accepte tout : images, SVG, polices. Du code SVG collé hors d’une zone de texte fonctionne aussi, et « Try a sample » (essayer un exemple) charge une petite icône.
2. Lisez les trois chiffres qui apparaissent : « File » (l’original), « Inlined » (la data URI complète, préfixe compris) et « Overhead » (le surcoût, la différence en pourcentage).
3. Lisez la ligne en dessous. Elle indique soit « Reasonable to inline. » (intégration raisonnable), soit « Use a normal file reference instead. » (utilisez plutôt une référence de fichier classique), suivi des raisons.
4. Copiez l’une des trois zones avec son lien de copie : « Data URI » (la chaîne brute), « CSS » (une déclaration background-image avec l’URI entre guillemets, puisque le base64 peut contenir une barre oblique) ou « HTML » (une balise <img> pour les images, un lien de téléchargement pour tout le reste). Vous pouvez aussi choisir l’extrait sous « Copy as » (copier comme) et le copier avec le grand bouton en dessous, ou le télécharger en fichier .txt depuis la barre du bas.

L’extrait HTML écrit alt="", ce qui indique aux lecteurs d’écran que l’image est décorative. Si l’image porte un sens, remplacez cette valeur par une description avant de coller l’extrait.

Où passe le tiers supplémentaire

Le rapport 4:3 est fixe : la taille du base64 de n’importe quel fichier est donc prévisible, quatre caractères pour trois octets, arrondi à un groupe de quatre complet. Le chiffre « Inlined » de l’outil compte aussi le préfixe, c’est pourquoi le surcoût affiché dépasse 33% d’environ un point sur les petits fichiers : data:image/png;base64, fait à lui seul 22 caractères.

Fichier	Octets	Base64 seul	Data URI complète	Surcoût affiché	Ce que dit l’outil
Icône PNG	3 072	4 096	4 118	+34%	Reasonable to inline
Icône SVG	3 072	4 096	4 122	+34%	Reasonable to inline
PNG, un octet au-delà du seuil	4 097	5 464	5 486	+34%	Use a normal file reference instead
Photo JPEG	204 800	273 068	273 091	+33%	Use a normal file reference instead, avec trois raisons

Chaque ligne est un simple calcul : 4 × ⌈3 072 ÷ 3⌉ = 4,096, et 4 096 + 22 = 4 118. Le préfixe SVG, data:image/svg+xml;base64,, fait 26 caractères ; celui du JPEG, 23.

La compression côté serveur récupère une partie de ce tiers pendant le transfert, mais moins qu’on pourrait l’espérer, car le base64 brouille les motifs d’octets répétés dont dépend un compresseur.

Le seuil de 4 096 octets, et ce que coûte son franchissement

Le verdict dépend de la taille du fichier d’origine. Jusqu’à 4 096 octets, l’outil approuve l’intégration : une requête de moins, rien à gérer dans un cache. À 4 097 octets, il passe à « Use a normal file reference instead », et les raisons s’accumulent à mesure que le fichier grossit.

• La mise en cache, pour tout fichier au-delà du seuil. Un fichier externe est récupéré une fois puis réutilisé sur chaque page. Un fichier intégré voyage à l’intérieur de son hôte : il est donc retéléchargé avec chaque document ou feuille de style qui le contient.
• Les images adaptatives, pour les images au-delà du seuil. Une data URI n’a pas d’URL sur laquelle le navigateur puisse négocier : vous perdez srcset, le chargement différé et toute optimisation d’image qu’aurait appliquée un CDN. Une police au-delà du seuil reçoit l’avertissement sur le cache, mais pas celui-ci.
• Le blocage du rendu, au-delà de 32 768 octets (8 × 4 096). Dans une feuille de style, le base64 doit arriver avant que la page puisse s’afficher, et une modification CSS sans aucun rapport invalide la copie en cache de toutes les ressources intégrées à côté.

La photo de 200 Ko du tableau cumule les trois. La phrase de l’outil à son sujet indique « At 200 KB this becomes roughly 267 KB inlined » (à 200 KB, cela devient environ 267 KB une fois intégré), et ces 267 Ko accompagnent la feuille de style à chaque visite où celle-ci n’est pas déjà en cache.

Quand une data URI est le bon choix

Petit, utilisé à un seul endroit et autonome : une icône unique dans un bloc de style intégré est le cas d’école. Réduisez le fichier au maximum avant de l’encoder, car chaque tranche de 3 octets gagnée retire 4 caractères du résultat. Un SVG peut d’abord passer par l’optimiseur SVG, et un PNG par le compresseur d’images, qui le réécrit sans changer un seul pixel.

	Le convertisseur de data URI	La commande base64	Un encodeur en ligne basique
Le fichier quitte votre machine	Non	Non	Selon le service
Préfixe data: et type MIME	Écrits pour vous	À ajouter vous-même	Variable
Taille affichée avec le préfixe	Oui, sous « Inlined »	Non	Variable
Conseil sur l’intégration	Oui, avec les raisons	Non	Rarement

Autres méthodes

En ligne de commande, l’outil base64 se charge de l’encodage :

base64 -i icon.png        # macOS
base64 -w0 icon.png       # GNU/Linux

Il produit la chaîne base64 nue. Pour l’utiliser comme data URI, placez data:image/png;base64, devant, avec le type MIME qui correspond au fichier ; si le type est faux, le fichier risque de ne pas s’afficher : les navigateurs devinent certains types d’image d’après leurs octets, mais un SVG doit être étiqueté image/svg+xml.

Vérifier que rien n’a été envoyé

Le fichier est lu en mémoire dans votre navigateur et encodé sur place, ce qui signifie aussi qu’il n’y a pas d’autre limite de taille que votre propre mémoire. Pour le vérifier, ouvrez les outils de développement de votre navigateur sur l’onglet Réseau avant de déposer un fichier : l’encodage n’ajoute aucune requête.

Faites la conversion, et prenez la décision, dans le convertisseur de data URI. Si le verdict déconseille l’intégration, réduire le fichier avec le compresseur d’images et le servir normalement est généralement le meilleur compromis.