Le poids et l’importance des images sur une page web
Les images représentent environ la moitié du poids des pages sur internet. Elles impactent directement la vitesse de chargement d’un site web.
(source HTTP Archive)
(source HTTP Archive)
Pour des pages qui se chargent rapidement dans le navigateur et une meilleure vitesse d’affichage, l’optimisation des images est incontournable !
Elle est cependant particulièrement complexe en raison de la variété des formats existants sur le web : JPG, GIF, SVG, PNG, WebP, AVIF…
L’une des forces de notre moteur d’optimisation du frontend est de vous permettre de compresser intelligemment les images en profitant des formats nouvelle génération comme le recommande Google dans les audits Lighthouse et PageSpeed Insights, mais aussi de les redimensionner automatiquement pour s’adapter à la taille de l’écran de vos utilisateurs.
Nous appliquons notamment aux images web :
- des algorithmes de compression triés sur le volet : MozJPEG, PNGquant, PNGCRUSH et Giflossy ;
- une analyse “Mean Pixel Error” qui permet de déterminer automatiquement le paramétrage de compression pour un rapport optimal qualité/poids ;
- un affichage des images adapté à chaque page : lazyload, inlining et rendu progressif.
Les meilleurs algorithmes de compression pour optimiser vos images
La compression des images est une étape incontournable pour un site performant, c’est même souvent la première. Voici les outils que nous avons donc choisi d’intégrer directement à notre moteur :
Compression JPEG : MozJPEG et analyse MPE
Le format JPEG est un format très utilisé sur le web. Il est particulièrement adapté aux photographies.
-
- MozJPEG, une librairie reconnue
L’utilisation de la librairie MozJPEG est devenue le standard de compression JPEG. En effet, cette librairie sortie en 2014 a largement amélioré la qualité de compression en comparaison aux librairies existantes. Son traitement des textes incrustés dans les images permet par ailleurs de sensiblement diminuer des halos gris apparaissant autour des lettres.
-
- L’analyse MPE pour le meilleur ratio qualité / poids
La compression JPEG peut se révéler difficile puisque le paramètre de qualité peut varier entre 40 et 100. Ce paramètre est par défaut fixé à 80 pour un bon ratio qualité/poids. Cependant, nous avons constaté que le choix du bon paramétrage est particulièrement difficile pour nos clients. Celui-ci varie en effet d’une image à l’autre. Nous avons mis au point une solution qui permet de déterminer automatiquement le paramétrage pour un rapport optimal qualité/poids. Notre système utilise pour cela un algorithme de comparaison d’image basée sur les caractéristiques du système visuel humain (MPE pour Mean Pixel Error). L’algorithme permet alors de tester des paramètres de qualité de plus en plus faible tant que l’image compressée ne présente pas d’artefacts visibles. Simple, mais très efficace : le poids des images est généralement diminué de 30 à 70%.
Compression PNG : PNGquant et PNGCRUSH
PNG est un format adapté pour les illustrations, dessins ou image avec un fond transparent. La compression généralement utilisée pour PNG est de la compression sans perte en supprimant les données redondantes. Nous utilisons pour cela la librairie PNGCrush. Par ailleurs, il est possible de convertir des PNG utilisant des couleurs sur 24/32 bit en image PNG utilisant des couleurs sur 8 bit.
Cette conversion a pour effet de réduire considérablement la taille du fichier (jusqu’à 70%) et préserve la transparence alpha. Les images générées sont, bien sûr, compatibles avec tous les navigateurs récents.
Dans le cadre de cette pratique aussi, plusieurs algorithmes intelligents permettent de compresser l’image tout en préservant au mieux la qualité visible de l’image.
Compression GIF : Giflossy
Le format GIF est principalement utilisé pour de l’animation. Ces images peuvent donc rapidement devenir très volumineuses. Pour remédier à cela, nous utilisons Giflossy.
Giflossy est un encodeur qui implémente la compression LZW. Il s’agit de répertorier de longues séquences de pixels qui se répètent sous une même référence. Ainsi, au lieu de stocker plusieurs fois les valeurs de pixels, on ne stocke qu’une seule fois la séquence.
Cela permet de réduire les fichiers animés de 30 à 50% contre une légère perte de qualité.
Compression SVG : SVGO
Afin de réduire le poids du fichier, la librairie SVGO supprime et/ou compresse toutes ces données sans que cela n’affecte la qualité de l’image. Cette optimisation est particulièrement intéressante lorsqu’on souhaite optimiser les sprites CSS.
Un affichage des images adapté à chaque page web
Au-delà du travail de compression que l’on peut faire sur le fichier, nous travaillons sur le chargement des images.
Le lazyloading
Seules les images visibles sont chargées dès le début. Les images restantes sont chargées lorsqu’on commence à scroller. Notre script n’est pas appliqué sur les premières images de la page pour tirer parti du pre-scanner des navigateurs.
L’inlining
Nous intégrons directement les petites images dans le code HTML de la page. Moins de requêtes, cela améliore le temps de chargement des premières visites, particulièrement sur mobile.
Le rendu progressif
Sans rendu progressif, les images JPEG se chargent de haut en bas. Avec la compression progressive, l’image entière s’affiche directement en basse qualité. Les détails apparaissent au fur et à mesure du chargement de l’image. Cette compression progressive est appliquée de façon intelligente uniquement sur les grosses images.
Chargement de haut en bas :
Chargement progressif :
Notez que les navigateurs modernes peuvent afficher des images JPEG plus rapidement si elles ont été créées en utilisant une méthode progressive.
Le redimensionnement et le recadrage automatique des images
Tout comme le poids des images, l’adaptation des dimensions à la taille de l’écran est indispensable pour la qualité de l’expérience utilisateur (et aussi pour éviter de charger des octets inutiles). C’est pourquoi Fasterize facilite l’implémentation des images responsive, et permet de redimensionner et de recadrer les images automatiquement.
Pour ce faire, notre outil permet de définir les attributs de dimensions d’une image dans l’URL (rapport hauteur / largeur) afin qu’elle s’adapte correctement à la taille de l’écran des utilisateurs. Il est ainsi possible de resizer, mais aussi de changer l’orientation de l’image, et même de la déplacer dans la page sans faire appel à du CSS (notre moteur se charge alors de redimensionner automatiquement l’image).
