Entre qualité d’image et vitesse des pages web, le bon compromis n’est pas toujours facile à trouver. On aimerait que chaque image soit adaptée à chaque utilisateur : qu’elle soit cadrée et aux dimensions parfaites selon l’appareil, que les paramètres d’encodage soient épurés de toutes les informations inutiles, et bien sûr que la qualité soit optimale. Mais en pratique, optimiser les images peut vite devenir un casse-tête.
Quelles sont les techniques, les outils, les bonnes pratiques, les meilleures libraires et les meilleurs algorithmes de compression d’images ? Etat des lieux des optimisations dédiées aux images dont vous pouvez profiter avec notre moteur, pour des pages légères et rapides, et une meilleure expérience utilisateur quelle que soit le navigateur et la taille de l’écran.
Avant toute chose, il faut savoir que deux types de compressions sont possibles :

  • la compression sans perte : elle réduit le poids des images sans altérer la qualité. Il s’agit essentiellement de suppression de données redondantes dans les fichiers.
  • la compression avec perte : elle utilise différents algorithmes basés sur l’analyse de la perception humaine pour réencoder une image en diminuant le poids. Une altération de la qualité de l’image est possible.

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.

Poids des images sur les pages web en 2021 - HTTP Archive
Poids des images sur les pages web en 2021 : 984 Kb sur desktop / 885 Kb sur mobile
(source HTTP Archive)
Poids total des pages web en 2021 - HTTP Archive
Poids total des pages web en 2021 : 2149 Kb sur desktop / 1920 Kb sur mobile
(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é.

GIF de 3MB

gif compression

Compression SVG : SVGO

Les fichiers SVG (particulièrement ceux qui ont été exportés depuis plusieurs éditeurs) contiennent souvent un bon nombre d’informations redondantes et inutiles (tel que les meta-données de l’éditeur, les commentaires, les éléments cachés, etc.).
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).

 

Le web souffre d’obésité notamment à cause de la place de plus en plus importante des images qui ne sont pas toujours optimisées ou qui – lorsqu’elles le sont – ne sont pas compressées de façon efficace.

Alors, pour un site web performant, des pages qui s’affichent rapidement pour tous vos utilisateurs mobile et desktop, et en conséquence un engagement et des conversions qui décollent, la compression des images est une étape obligatoire !

Pour connaître l’impact de la compression des images
sur vos performances grâce à notre moteur :
Demandez une démo

Hello SMX Paris !