Encoder ses images en base64 est une technique d’optimisation web qui permet de convertir une image en une chaîne de caractères directement exploitable par le navigateur, le but principal étant d’économiser une requête HTTP vers la ressource (puisque celle-ci est directement embarquée dans le HTML ou le CSS).

Revers de la médaille, cette technique génère une chaîne plus lourde que le fichier original. Il faut donc l’utiliser avec parcimonie sur de petites images et jauger le gain en terme de performances.

Ainsi, même si la technique se révèle assez efficace pour une ou deux images, il faut lui préférer au-delà la technique des sprites CSS ou encore l’utilisation d’une police d’icônes (pour des icônes simples et monochromes).

Enfin, vous devez savoir que le navigateur IE7 ne gère pas ce format (mais ça on s’en fiche :p) et que IE8 impose une limite de 32 KB à celui-ci (mais à ce niveau, on perd l’intérêt de la chose).

Utilisation concrète

Exemple en HTML :

<pre class="lang:xhtml decode:true"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></pre>

Exemple en CSS :

<pre class="lang:css decode:true">background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAIAAAAiZtkUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi6dFgYmdj//nrpwAXx6+f3xkYGFj+MrN++/uPgZn1968fbOycICFhdmYGMPj+h+nrtx/MTExMEMVA8uP3n0AdvxiZAQIMABFCHYYroQd+AAAAAElFTkSuQmCC);</pre>
L’astuce avec openssl

Il existe de nombreux convertisseurs en ligne capable d’effectuer cette tâche. Toutefois, sachez que vous disposez déjà des outils nécessaires et il serait donc dommage de s’en priver 🙂

L’astuce se situe au niveau de l’utilitaire openssl (à utiliser en ligne de commande) :

openssl base64 -in mon_image.png | tr -d '\n'

Ici, on convertit l’image en base64 pour ensuite rediriger le résultat vers la commande tr qui permet de supprimer les retours chariot.

Pour encore plus de rapidité, il est possible de copier directement la chaîne dans votre presse-papier.

Sur Linux (nécessite l’installation du paquet xclip) :

openssl base64 -in vertical_cloth.png  | tr -d '\n' | xclip

Bref, une technique à utiliser avec modération mais qui peut parfois s’avérer utile.