Encoder ses images en base64

aperçu d'une image encodée en base64L’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?

Cette entrée a été publiée dans CSS, HTML, Optimisation, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

13 commentaires pour Encoder ses images en base64

  1. staJr

    Super l’article !
    Alors par contre du coup, je me pose deux questions. Qu’appels tu « image de petite taille ». A partir de quel poids ne faut il plus envisager d’utiliser l’encodage en base64. Faut il encoder un sprite CSS ?

    ++

  2. Merci StaJr,

    Sans avoir fait d’étude poussée, je dirais que les images de petites tailles sont celles pesant moins de 4-5Ko. Ça inclut pour le coup une grande partie des images appelées via CSS.

    Le sprite CSS je n’ai jamais été un grand fan même si dans certains cas son utilisation s’impose. Sa maintenance est compliquée et si on ne la fait pas régulièrement, l’optimisation se perd par le poids excessif de ce fichier. Rappelons aussi que les smartphones mettent en cachent seulement les fichiers pesant moins de 25Ko, ce qui impose une taille max au sprite.

  3. Mes tests confirment vos dires : j’ai fait des tests avec de très grosses images sur un slide (9 images 1000X320), puis ai comparé avec les autres pages de mon site avec le même slide en images JPG : beaucoup moins de requêtes mais la cata pour le temps de chargement, le fichier HTML devenant énorme.

    Merci pour l’info sur le cache max des smatphones, je ne la connaissais pas.

    Bien à vous

  4. Bellami

    Mes infos sur le cache max des smartphones sont apparemment dépassées si l’on en croit le lien suivant : http://www.phpied.com/iphone-caching/

    C’est tombé à 15K le cache max :(

  5. A savoir tout de même que j’avais mis en place ce système sur mon site internet (net-referencement.net), je l’ai abandonné car il représente tout de même un inconvénient.

    C’est vrai que ça limite le temps de chargement du site la première fois qu’un visiteur entre sur le site, mais pour les fois d’après, ça en devient beaucoup lourd car un image générée en base 64 ne peut pas être mise en cache par le navigateur, ce qui devient donc plus lourd à la navigation sur les pages suivantes….

  6. Bellami

    Bonne remarque Gaudac!
    Toute technique d’optimisation doit prendre avant toute chose les spécificités de son environnement. Un site effectuant beaucoup de pages vues devrait surement privilégier la mise en cache par rapport à la rapidité d’affichage. Néanmoins, je reste convaincu que c’est la première impression qui compte.

    Il me vient une idée un peu saugrenue techniquement compliquée à maintenir mais qui permettrait de concilier les deux points de vue :
    Imaginons un site où il est possible de se connecter.
    Si on édicte une règle du type : « si l’utilisateur est connecté, alors le code html est optimisé pour de la mise en cache (image en fichiers), sinon le code html est optimisé pour une rapidité de premier affichage (image en base64).
    Il faudrait du coup gérer une condition au sein du serveur (et donc perdre du temps à délivrer le code html) ; et il faudrait gérer un beau merdier si une technique de mise en cache des pages est utilisée :(.

  7. Le lien « article de Dean Edwards : Base64 Encoded Images for Internet Explorer » ne fonctionne pas.

    L’URL est http://dean.edwards.name/weblog/2005/06/base64-ie/

    Autrement pour IE 7, une solution est peut-être le CSS dédié via les commentaires conditionnels d’IE.

  8. Bellami

    Le lien est corrigé, merci bien!
    Effectivement, les commentaires conditionnels sont une solution mais je ne les envisage pas car ils sont contre-performants et que la maintenance se complique grandement : du code CSS spécifique, des images spécifiques à maintenir à jour.
    J’ai écrit cet article il y a bientôt 2 ans, à l’heure actuelle je pense qu’on peut passer outre le support d’IE7 à moins d’avoir un client « chiant »
    Selon Statcounter, IE7 représente… moins de 0.6% du marché : http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201304-201304-bar

  9. Ping : Ajouter des favicons aux bookmarklets dans Chrome | Le Newbie

  10. Je cherchais justement un moyen de limiter mes requêtes envoyé sur mon serveur sur mes images, me voila renseigné !
    Merci pour les infos.

  11. C’est une idée l’encodage en base64, moi je vérifie la vitesse d’affichage des pages de mon site avec GTmetrix, et ensuite je place un code dans le .htaccess pour réduire le poids des images. On peut voir un exemple avec le site que j’ai mis en exemple.

  12. Merci pour cet excellent article.
    J’en ai eu besoin pour un truc très particulier, et qui convient parfaitement ici :
    A cause de l’extension adblock, il arrive que des images ne s’affichent pas (parce qu’elle porte un nom assimilé à de la pub, ou sont dans un dossier « ad », par exemple.
    Quand on veut les afficher justement pour informer l’utilisateur qu’il utilise adblock, les encoder permet de passer outre le blocage d’AdBlock !
    Merci encore pour tous ces super tutos :-)

  13. Salut, je tombe avec plaisir sur cette page.
    J’ai juste une question: certains de mes correspondants, (très peut) se plaignent de ne pas voir la photo, mais la succession de lettres et signes.
    je pensais que c’était une question de navigateur.
    Qui pourrait me dire de quoi il s’agit?
    MERCI

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>