Johan BLEUZEN - Encoder des images en base64 dans ses CSS

Encoder des images en base64 dans ses CSS

10 Août 2010

Lors de la soirée sur les web performances, j’ai découvert le principe d’insérer ces images dans un fichier CSS en les encodant en base64. Je ne connaissais pas, mais le principe m’a bien plu car cela permet, une fois n’est pas coutume, de diminuer le nombre de requete HTTP effectuée sur le serveur. J’ai testé un peu avec cette technique et je l’ai appliquée pour certains éléments de mon blog, le gain est minime mais intéressant…

Comment coder son image en base 64

Le principe d'encoder ces images en base64 pour les insérer dans son fichier CSS est simple, mais il vaut mieux expliquer un peu comment cela fonctionne. On va sélectionner une image puis la transformer en String pour la copier dans sa feuille de style.

Pour transformer un fichier image en chaîne de caractère, il existe différents moyens, on peut utiliser les moyens suivants :

Un outil de conversion en ligne
un terminal Shell

Personnellement, j'ai choisi la méthode du terminal. Il suffit de saisir la commande suivante pour encoder l'image MON_IMAGE.png et voir apparaitre une série incohérente de caractère dans son terminal :

$> openssl base64 -in ~/Desktop/MON_IMAGE.png
iVBORw0KGgoAAAANSUhEUgAAArwAAAICCAIAAACiGIkRAAAACXBIWXMAACVfAAAl
XwGJnX8tAAAgAElEQVR4AbS9d6xte37YtXrbfZ+9T7+9vDbdMxmDx8YmLglKLCOM
IixDQoKM5CgSECOwBPI/BKEghOAfSzEoSCAQBCnEYEPs8cSOS+wp9sz49XbrufeU
...

Le résultat obtenu avec cette commande est la représentation en base64 de l'image que vous avez utilisée soit MON_IMAGE.png. Cette chaîne est brut de fonderie, c'est à dire que tous les 64 caractères openssl ajoute un retour de chariot.

Mais avec un petit ajout à la commande originale, on peut facilement supprimer tous les retours de lignes :</p ``` shell $> openssl base64 -in Desktop/MON_IMAGE.png | tr -d '\n\' iVBORw0KGgoAAAANSUhEUgAAArwAAAICCAIAAACiGIkRAAAACXBIWXMAACVfAAAlXwGJnX8tAAAgAElEQVR4AbS9d6xte37YtXrbfZ+9T7+9vDbdMxmDx8YmLglKLCOM... ```

Utilisation de la chaîne base64 dans la CSS

Pour insérer votre chaîne dans votre CSS, il n'y a rien de compliqué. Il faut utiliser la même propriété qu'auparavant mais il faut changer le contenu du paramètre url(). Pour utiliser une image en base64, il faut avertir le navigateur puis insérer la chaîne en base64, ainsi le code CSS devient :

``` css #AVANT header{ background:blue url(http://monserveur_d_image.com/MON_IMAGE.png); } #APRES header{ background:blue url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAICCAIAAACiGIkRAAAACXBIWXMA...); } ```

Le cas d'Internet Explorer

Comme d'habitude IE ne fait pas les choses comme tout le monde, les versions 6 et 7 d'IE ne comprennent pas les images encodées en base64. Il est nécessaire d'utiliser un hack pour remplacer l'image base64 par l'image originale. N'étant pas un spécialiste des hacks IE, je conseille d'utiliser le snippet de code suivant pour ces navigateurs. ``` css * header{ background:blue url(http://www.monsite.fr/images/MON_IMAGE.png) ; } ```

Conclusion

Le gain en nombre de requête peut être intéressant si l'on a beaucoup de petites images et reste pour moins le principal attrait de cette technique. Je l'utilise pour mes images de fonds dans le design de ce blog.

Avantages :

Diminution du nombre des requêtes HTTP,
Solution adaptée aux petites images,
Les images tirent partie du GZip puisqu'elles sont encodées au format texte.

Inconvénients :

Le fichier CSS est plus lourd,
A chaque modification d'une image il faudra mettre à jour le fichier CSS,
N'est pas supporté par tous les navigateurs,

Et pour la forme voici, quelques petits conseils qui peuvent être intéressant de rappeler si vous voulez gagner quelques précieux kilo-octets :

Utilisez cette image pour des images que l'on ne modifie pas souvent
Optimisez vos images avec Smushit (par exemple) avant l'encodage en base64
Les images ne doivent pas dépasser3 kilo-octets
Placez les attributs CSS en début de fichiers pour que l'affichage soit le plus rapide possible

Source image : Gallerie DeviantArt de Mikenu