Entre qualité d’image et vitesse du site web, il est souvent difficile de trouver le bon compromis.
On aimerait que chaque image soit adaptée à chaque utilisateur : qu’elle soit cadrée à la perfection selon le terminal, que les paramètres d’encodage soient épurés de toutes informations inutiles et bien sûr que la qualité soit optimale. Mais tout ça peut vite devenir un casse-tête chinois à mettre en place.

C’est pourquoi notre équipe technique a scruté toutes les bonnes pratiques et meilleures libraires en la matière pour que Fasterize implémente les meilleurs algorithmes de compression d’images.
Ici, nous allons vous dresser un état des lieux des différentes méthodes que l’on applique.

Mais 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.
  • 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.
TLDR
Les images représentent la majeur partie du poids des pages. Elles impactent donc directement la vitesse de chargement d’un site web.

Alors si on souhaite garder de bonnes performances : l’optimisation des images est incontournable.
Elle est cependant particulièrement complexe de par la variété de formats existants sur le web.

Dans cet article, nous vous présentons les différentes solutions mises en place par Fasterize pour optimiser le plus intelligemment possible les images.
Parmi elles :

  • 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

1. Les meilleurs algorithmes de compression pour optimiser vos images

La compression des images est une étape incontournable en webperf. Elle en 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 s’avérer 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 modernes.

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.

2. Un affichage des images adapté à chaque page

Au-delà du travail de compression que l’on peut faire sur le fichier, nous travaillons sur le chargement des images.

On utilise :

  • le lazyload : 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 et tablette.
  • et 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 web souffre d’obésité notamment à cause de son absorption d’images en tout genre. Images qui ne sont pas toujours optimisées ou qui – lorsqu’elles le sont – ne sont pas optimisées de façon efficace.
Alors si on veut redonner un peu de vigueur au web, la compression des images est une étape obligatoire, quand bien même celle-ci peut représenter un labyrinthe sans fin.
Mais si vous ne trouvez pas la sortie …

Automatisez votre compression d’image :

Demandez une démo

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

4 pièges à éviter pour optimiser efficacement votr... Par manque de temps ou de ressources, la webperf ou l'amélioration des temps de chargement des pages web sont parfois reléguées au second plan. Dom...
CMS et temps de chargement des pages web Quel système de gestion des contenus (CMS, Content Management System) choisir pour garantir un temps de chargement optimal des pages de votre site ...
Le Early Hint ou comment précharger les assets d’u... Peut-être avez-vous déjà entendu parler du Early Hint ? Ou peut-être du code HTTP 103 ? Cette fonctionnalité, en cours de standardisation pa...
Traffic Limiter : pour activer le système de déles... En période de soldes ou pendant le Black Friday / Cyber Monday, une page de débordement - ou système de délestage - permet de définir un nom...