Optimiser l'affichage des images

L’optimisation d’images est un moyen - très - efficace pour réduire le poids de ses pages Web. Toutefois, cette étape d’optimisation (simple et rapide) est souvent oubliée par les développeurs.

Optimisation des .png et .jpg

Pour l’optimisation d’image de nombreux outils (applications ou sites web) et, pour ma part, j’utilise principalement https://tinypng.com/ qui fonctionne via un simple drag and drop.

De manière plus concrète, prenons l’image de ce chat pesant 636.8 Ko sans optimisation.

En l’optimisant, on constate que son poids passe à 234.5 Ko (soit une perte de poids de 63% !) :

De plus, je vous mets au défi de trouver des différences au niveau de l’image générée !

P.S : n’oubliez pas de réduire la taille de vos images aussi ! Il est inutile d’utiliser une image de 600x600 dans un bloc HTML de 200x200.

Optimisation des .svg

Il est aussi possible d’optimiser les fichiers SVG pour obtenir un gain de performance (moins important que l’optimisation des .png et .jpg toutefois). Pour ma part, j’utilise svgomg qui fonctionne lui aussi via drag and drop.

En prenant cette image de 4.2 Ko et en l’optimisant, nous obtenons une taille finale de 1.4 Ko, soit une perte d’environ 60% de son poids initial.

Avant :

Après :

Lazyloading** d’images avec **lazysize.js

Rien n’est plus optimal qu’une image non téléchargée ! Ou plus exactement, qu’une image téléchargée au moment où elle va devenir visible. C’est ce qu’on appelle le lazyloading.

Lazysize est une librairie JavaScript nous facilitant la mise en place du lazyloading d’images. D’une taille gzippé de 3.2Ko, son utilisation se veut assez simple :

<img data-src="static/logo.jpg" class="lazyload" alt="" />

De plus, la librairie permet aussi d’adapter les images en fonction de l’appareil de l’utilisateur (mobile, tablette ou PC).

<img
  alt=""
  class="lazyload"
  data-srcset="small.jpg 500w,
    		medium.jpg 640w,
    		big.jpg 1024w"
  data-src="medium.jpg"
/>

Pratique pour accélérer le chargement de ces pages en ne téléchargeant que les parties visibles mais aussi s’adapter au support de l’utilisateur.