Retour à la liste

Encoder ses images en base64

Créé : 02.04.2015, 12:00:18  -  Modifié : 22.05.2018, 04:13:25

L’encodage des images en base64 est une des bonnes pratiques d’optimisation web. Cet encodage transforme un fichier image en suite de caractère. Cela permet de diminuer considérablement le nombre de requêtes envoyées au serveur web par le navigateur. Mais ce principe ne peut pas être généralisé à toutes les images, il faut savoir l’utiliser avec parcimonie.

Comment encoder en base64

D’ordinaire, une image qui s’affiche au sein d’une page web est un fichier image extérieur à la page web. Par exemple, dans le code source de cette page vous trouverez le code suivant :<img src="http://www.bellami.fr/wp-content/uploads/2011/06/base64.jpg" alt="aperçu d'une image encodée en base64" />Cela signifie que quand le navigateur télécharge la page web, il va, à un moment donné, demander le téléchargement du fichier image. Le navigateur envoie donc une requête au serveur web, qui va délivrer ensuite l’image au navigateur. Le temps total de l’affichage de l’image est donc la somme du temps de réponse de la requête et du temps de téléchargement de l’image. Le fait d’encoder votre image en base64 va supprimer cette requête étant donné que les caractères constituant l’image sont insérés en HTML dans la page web de cette manière :<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQE..........ASABIAAD/2wAGADABg D//Z" alt="aperçu d'une image encodée en base64" />La page web ne fait plus appel à un fichier externe, faites ceci pour 10 appels d’images et vous gagnerez environ 1 seconde sur le chargement de votre page! Un gain loin d’être négligeable.
L’encodage en base64 est également utilisable en CSS, toutes vos images de contenu et de design peuvent donc en profiter.

Les défauts de l’encodage en base64

Un défaut de l’encodage en base64 est que le poids total de l’image augmente en moyenne de 50%. Comme le temps d’une requête est très court, de l’ordre des 100ms en moyenne, seules les images de faible poids doivent être converties en base64 pour gagner en performance.
De plus, sachez que l’encode en base64 n’est pas compris par Internet Explorer 7 et inférieurs. Il existe des solutions alternatives pour ces navigateurs, mais ce n’est pas le but de l’article, ni ma philosophie de devoir hacker un navigateur. Cela ajouterai du temps de calcul supplémentaires à IE7 qui n’en a pas vraiment besoin étant donné sa lenteur d’affichage d’origine.
Mais ce non-support de certaines versions d’IE impose dans certains cas une restriction supplémentaire : choisir les images qui peuvent ne pas s’afficher sous IE7 et inférieur.

Limiter l’usage des images encodées en base64

Si le support d’IE7 est nécessaire pour le site, il faut faire attention à deux problématiques différentes :
_ Toutes les images de contenu ne doivent pas être encodées en base64 car elles sont par définition importantes à afficher à moins que vous pouvez vous contenter du texte alternatif, ce qui n’est généralement pas du goût de votre client/patron.
_ Convertir en base64 les images de design qui selon vous ne sont pas nécessaires au bon fonctionnement du site. Par exemple, il faut se demander : « Si j’encode cette image (qui représente une flèche cliquable permettant d’afficher la photo suivante), est-ce qu’un utilisateur d’IE7 comprendra que cette fonctionnalité existe ? Si la réponse est oui, foncez!

Pour les détails techniques de la base64 je vous invite à lire l’article de Wikipédia concernant la base 64.
Pour encoder ses images en base64, je vous conseille le service web suivant : http://www.motobit.com/util/base64-decoder-encoder.asp.
Pour rendre Internet Explorer compatible avec la base64, je vous invite à lire l’excellent article de Dean Edwards : Base64 Encoded Images for Internet Explorer

En résumé, pour améliorer les performances de son site web, il faut encoder en base64 seulement les images de petite taille. Si le support d’Internet Explorer 7 est vital pour votre site, seulement certaines images secondaires de design peuvent être converties. Et vous, avez-vous un retour d’utilisation de l’encodage en base64?


Rendu :0.3658 | Mémoire :2.88MB

Accueil | Informations | Top