Optimiser le chargement de ses images

Quand on parle d’optimiser le chargement de son site on pense généralement à son code ou à son serveur, mais un autre paramètre influe au niveau de l’affichage : les images. Il s’agit d’un critère important qu’il est possible d’améliorer grâce à deux techniques : réduire le nombre d’accès serveur & optimiser le poids de ses images.

1 – Réduire le nombre d’accès serveur

Sprites CSS

Comme le conseille Google Page Speed il est important de limiter autant que possible le nombre de requêtes HTTP.  En effet les navigateurs ne pouvant télécharger que deux à quatre éléments en parallèle, plus le nombre d’éléments est important plus le temps de latence du serveur est important (plus d’informations à ce sujet). Il est donc nécessaire de limiter le nombre d’image a charger, et il existe une solution : les Sprites CSS.

Cela consiste simplement a combiner plusieurs images en une seule. L’affichage de la « sous-image » en question se fera ensuite dans le CSS, via la propriété background-position. C’est en théorie là ou vous vous demandez : « Oui mais comment-faire concrètement ? ». Et bien il existe des générateurs comme Css-Sprit.es qui permettent en quelques clics d’uploader toutes vos images, et d’en ressortir un beau sprite avec son CSS associé. Attention cette technique n’est adapté que pour des images de petite taille, généralement en .gif ou .png

Passons à un cas concret, je viens de réaliser un sprite des icônes du thèmes par défaut de Prestashop. On se retrouve ainsi une seule image, évitant par conséquent une quarantaine d’accès serveur. Pour ne rien gâcher le poids total est passé de 123 ko à 18 ko !

Encodage base64 des images

L’encodage des images en base64 permet de transformer un fichier image en une suite de caractères. L’intérêt ? La chaîne peux être ensuite insérée dans votre CSS ou HTML, on passe donc de 1 à 0 accès serveur supplémentaire. Youpi. Attention toutefois, même si l’on gagne un accès, une fois encodé une image peux « prendre du poids » (+33% en théorie). La technique est donc réservée aux images légères. Cette méthode reste malgré tout expérimental pour la simple et bonne raison qu’IE6 et IE7 (encore 4% du trafic à ce jour) ne supportent pas l’affichage des images encodées.

Si malgré cela vous souhaitez tester cette méthode, je vous conseille Base64 Image, convertisseur en ligne.

Voila par exemple ce que ça donne pour ce picto :

background-image: url('data:image/gif;base64,R0lGODlhCwANAKIAAP///8rKypqammVlZTU1NQAAAAAAAAAAACH5BAEHAAAALAAAAAALAA0AAAMsCArUyy3KFmoQWIzJCQNVtimeEAwCMX4mqnrsma6l/JJAO8O1S4MXDK3jSQAAOw==');

2 – Optimiser le poids de ses images

Le poids d’une image se détermine au moment où elle est enregistrée : Quel format (png,gif…)? Quelle qualité de compression jpeg ?

Cette étape est évidemment la plus importante, mais il reste tout de même la possibilité de grappiller quelques ko(s). Pour cela je vous suggère Smush.it service de Yahoo permettant de réduire le poids de vos images sans perte de qualité. Smush.it se contente de supprimer toutes les données inutiles du fichier. Il suffit d’uploder ses images et ressort après quelques secondes un zip content toutes vos images optimisées. On connaît même le nombre et le pourcentage de bytes gagnés. Petit test avec le thème par défaut de Prestashop:

Smushed 22.12% or 31.52 KB from the size of your image(s).

Pas mal! Voilà une bonne pratique à adopter une fois son découpage terminé 😉

Pour aller encore plus vite, il existe aussi de bons logiciels « desktop » de compression lossless :  Trimage (Linux) et ImageOptim (Mac)