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.

Source