De l’utilisation de Base64 en CSS
À cheval sur les recommandations de Google et de Yahoo que l’on peut obtenir facilement en utilisant des outils tels que Page Speed ou Yslow (2 plugins pour l’extension Firebug de Firefox), je suis régulièrement amené à faire des choix en matière de graphisme. Faut-il privilégier l’expérience utilisateur en intégrant (intelligemment) des icônes aidant à la compréhension de l’interface, ou bien est-il plus important de conserver des pages rapides à charger, avec un minimum de requêtes http ?
J’ai découvert aujourd’hui l’existence d’un algorithme de codage de l’information basé sur une table limitée à 64 caractères, le Base64. Une fois une image encodée à l’aide d’outils comme celui de Motobit, elle peut être intégrée simplement à tous types de fichiers dont le html, le xml et le CSS ! Au lieu d’afficher ces images depuis votre serveur, le navigateur les génèrera à partir du code Base64 contenu dans le fichier CSS. Cela permet de limiter le nombre de requêtes http, et donc d’accélérer le temps de chargement et d’affichage des pages.
Certains me diront que les images appelées via CSS sont mises en cache par le navigateur. C’est certain, mais le fichier CSS en lui-même l’est également… D’autres argumenteront en annonçant un poids supérieur de l’ordre de 150% entre un code en Base64 et une image équivalente. Certes, mais un fichier CSS peut être gzipé, ce qui n’est pas le cas d’une image. Pour convaincre ceux qui douteraient encore de l’intérêt de la chose, l’appel d’images en Base64 est instantané. Il peut remplacer les sprites pour gérer les changements de backgrounds en hover sans temps d’attente.
Appel d’une image en CSS classique :
.maclasse{
padding-left:20px;
background:url(icone.png) 0 0 no-repeat;
}
Appel d’une image avec Base64 :
.maclasse{
padding-left:20px;
background:url(data:image/png;base64,CODE64ASSEZLONG...) 0 0 no-repeat;
}
Du côté des faiblesses, on notera tout de même une non-compatibilité acec les navigateurs anciens comme IE6 et IE7, et la relative difficulté de mise à jour du graphisme si vous n’avez pas conservé une version non encodée des images utilisées. Au delà de ces limitations faciles à contourner, le couple CSS/Base64 m’apparaît comme une révolution à même de résoudre les « problèmes » de nombre de graphistes et webdesigners. La fin des sprites de 500 pixels carrés et des background-position à gogo est terminée (pour moi en tous cas) !
Vraiment sympa comme astuce. Après de là à l’appliquer sur chaque sites… Je pense que c’est plutôt au cas par cas :p
D’un autre côté je suis curieux de l’effet que cela pourrait avoir sur un mutualisé car cela diminue au maximum le nombre de requête.
En effet c’est au cas par cas. Pour ce qui est du bénéfice sur un hébergement moyen je ne pense pas que ce soit énorme dans la mesure où ça concerne de petites images, c’est-à-dire des fichiers statiques…
En tous cas je commence déjà à l’utiliser pour Scooter System et je trouve ça tout simplement énorme.
Bonjour !
Bonne technique car elle permet de supprimer un appel HTTP pour une image !
Mais tu oublis de préciser que cette technique est à utiliser pour de petites images de 3 ou 4 kilos environ, sinon tes fichiers css deviennent illisibles.
Ensuite, il ne faut pas oublier d’optimiser ces images avant de les passer en base64 et là tu aura un vrai gain avec le gzip par rapport à une image compressée, car une image en base64 et une image ont exactement le meme nombre d’octets, c’est juste la représentation qui change !
Enfin, il existe des hacks pour IE6 et IE7, mais personnellement, je me passe du support de ces navigateurs donc pas de hack pour moi !
Je vais mettre mon site à jour avec cette technique incessamment sous peu !
Johan
Alors certes, les images ne sont pas gzippé mais un format comme le jpeg est compressé par nature.
Après l’intérêt des d’éviter une requête http, mais typiquement dans les CSS les sprites sont vraiment efficace.
A dire vrai, je trouve la technique du base64 surtout intéressant dans le cas utilisé sur Google News. Si on regarde de près le code source de Google news, les images sont en base64. Dans ce cas là on est dans un cas très difficilement spritable et donc le gain en performance réellement intéressant.
Merci pour ton retour ! En effet je n’avais pas remarqué que Google News utilisait le Base64 pour les images ! Par contre celles-ci sont appelées depuis le html et non depuis le CSS.
Dans tous les cas, le Base64 / CSS peut s’avérer pratique dans un certain nombre de cas de figures, il ne faut pas l’exclure d’entrée…
De manière totalement arbitraire, à titre personnel, j’utilise le base64 dans les CSS lorsque le temps de réception de l’image (le transfert proprement dit, uniquement) est inférieur au temps de recherche DNS+Connexion (que l’on peut obtenir avec firebug)
Cependant, les valeurs sont à mesurer à partir d’un point de connexion et d’une machine représentative de la majorité des visiteurs.
Par contre, jamais de base64 dans le html! Un navigateur mobile qui bloquerait les media pour aller plus vite ainsi que les crawlers seraient obligés malgré tout de se taper le supplément à chaque chargement de page. Et je rappelle que le Google Bot arrête de scanner la page au delà de 50ko
Merci pour cet article qui reprend bien ce que j’ai pu lire lors de mes précédentes recherche.
@Johan
« Mais tu oublis de préciser que cette technique est à utiliser pour de petites images de 3 ou 4 kilos environ, sinon tes fichiers css deviennent illisibles. »
Le problème est surtout que les RFC ne garantisse un support de taille d’URL que jusqu’à 1024 octets…
(bien que les navigateurs aillent le plus souvent assez largement au delà)
« une image en base64 et une image ont exactement le meme nombre d’octets, c’est juste la représentation qui change ! »
D’après mes tests et lectures, c’est faux. Je ne saurais dire pourquoi par contre.
Pour plus d’info :
http://www.websiteoptimization.com/speed/tweak/inline-images/ paragraphe : Disadvantages of Data URLs
Certes, la mise-à-jour de ce type peut être gênante si tu le fais à la main. Heureusement, tu peux mettre en place une chaîne automatisée de mise en production d’un site en développement qui fait ce type d’optimisations automatiquement. Autrement, si tu ne souhaites pas consacrer ce temps, ou tu préfères des solutions moins contraignantes en étapes intermédiaires, tu peux aussi opter pour un outil tel que mod_pagespeed de Google, qui gère cela automatiquement, avec un système de cache.