Comment utiliser l'application "Images" ?

Pourquoi optimiser ses images est important ?

Les images représentent en moyenne 50% du poids d’une page web.

Optimisez vos images simplement et automatiquement pour offrir une expérience optimale en permettant aux utilisateurs de visualiser les images des pages de votre site très rapidement et sans perte de qualité. Cela passe par plusieurs techniques que Fasterize met à disposition pour optimiser les images elles-mêmes mais aussi pour prioriser le chargement de celles qui sont les plus importantes pour l'utilisateur

Non seulement Fasterize optimise automatiquement chacune de vos images sans dégradation de la qualité visuelle et quel que soit le format d’origine mais les charge aussi de façon intelligente.

Comment activer la fonctionnalité ?

Format moderne

Conversion d'ancien format (PNG, JPEG) au format (WebP/Avif)

Le moteur Fasterize compresse les images à la volée en convertissant les anciens formats (PNG, JPEG) en format nouvelle génération, WebP ou AVIF.

Avantage webperf :
En moyenne, une image WebP est 30% plus légère qu’une image JPEG, nous atteignons jusqu'à 80% avec le format AVIF.
La conversion en format moderne permet donc de diminuer le poids des images, d'accélérer leur chargement et leur rendu par le navigateur. Ce qui améliore les métriques de vitesse, dont le LCP et le Speed Index.

Format classique

Optimisation des images aux formats (PNG, JPEG, GIF et SVG)

Tous les formats d’images (PNG, JPEG, GIF et SVG) peuvent être compressés par Fasterize. Pour cela, le moteur compresse une image JPEG petit à petit, en optimisant au maximum via un algorithme (MPE - Mean pixel error) qui simule le regard humain, et qui essaye plusieurs compressions à différentes qualités. Pour chaque compression, il compare l’image originale à l’image obtenue via un score qu’il attribue à chacune, afin d’obtenir l’image la plus compressée possible, tout en préservant un seuil d’acceptation de sa qualité pour ne pas provoquer de dégradation visuelle (artefact).

Fichiers JPEG

Strip Metadata

Grâce à cette option, certaines informations auxiliaires de l'image seront supprimées. Telles que : le modèle d'appareil photo, les coordonnées GPS, le nom du propriétaire, commentaires, audio intégré, vignette, date de prise de vue, description, mots-clés et bien plus encore, y compris les métadonnées EXIF, IPTC, XMP et Photoshop tout en préservant l'orientation et le profil de couleur.

Chargement progressif des grandes images

Grâce à cette option, l’image entière s’affiche rapidement en basse qualité et les détails apparaissent au fur et à mesure du chargement de l’image. Via le moteur Fasterize, ce rendu progressif des images est appliqué de façon intelligente, en ne sélectionnant que les images occupant une surface importante. Aujourd’hui, les navigateurs modernes permettent d’afficher plus vite ces images en Progressive JPEG.

Détection automatique de la qualité

Déterminer quel paramètre de qualité est le meilleur pour chaque image en fonction d'un algorithme de détection d'artefacts tout en conservant la même qualité visuelle perçue.

Quality Preset &  Qualité minimale

Pour garantir une expérience visuelle optimale, un paramètre de qualité prédéfini (Quality Preset) est utilisé pour ajuster automatiquement la compression et la résolution des images. Cela permet de maintenir la qualité visuelle tout en minimisant la taille des fichiers.

Fichiers PNG

La conversion d’images PNG est également possible en passant du format PNG24 à PNG8, les chiffres 8 et 24 correspondent au nombre de bites utilisés pour encoder une image. La différence se situe dans la profondeur des couleurs. Png24 utilise 16 millions de couleurs tandis que png8 en utilise 256.

Passer d’un format à l’autre va consister à chercher une couleur de png8 qui soit semblable ou très proche d’une couleur existante dans le format png24.

Dans le cas de cette conversion, nous parlons d’une compression avec perte (lossy compression), car les couleurs sont légèrement différentes même si cela demeure difficilement perceptible sur le rendu final de la plupart des images.

Fichiers SVG

Les fichiers SVG, notamment ceux exportés par divers éditeurs, contiennent généralement beaucoup d'informations redondantes et inutiles. Il peut s'agir de métadonnées de l'éditeur, de commentaires, d'éléments cachés, de valeurs par défaut ou non optimales et d'autres éléments qui peuvent être supprimés ou convertis en toute sécurité sans affecter le résultat du rendu SVG.

Avantage webperf :
La compression d’image permet d’améliorer votre LCP (largest contentful Paint) et de diminuer considérablement le poids des images de 30 à 80% sans perdre en qualité visuelle.
La conversion d’images PNG peut réduire la taille des fichiers jusqu’à 80% de sa taille initiale.

Lazyload et Unlazyload

Le Lazyloading est une stratégie d'identification des ressources non bloquantes (non critiques) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon de raccourcir le chemin critique de rendu ce qui se traduit par une réduction du temps de chargement de la page.

Lazyload

Si votre site n'intègre pas de système de Lazyload, vous pouvez activer en 1 clic celui de Fasterize. 

L'offset correspond au nombre d'images à ignorer lors du chargement différé pour améliorer les performances de rendu.  Cela permet de ne pas appliquer le lazy loading aux premières images. Sachant que l'indication des images à ne pas lazyloader peut être fait de façon encore plus fine grâce à la configuration d'une cible dédiée.

Avantage webperf :
Prioriser le chargement des visuels qui sont au dessus de la ligne de flottaison en dépriorisant ceux qui sont en dessous de cette ligne permet d'accélérer l'affichage de la partie visible de la page et donc d'améliorer le ressenti utilisateur. Les indicateurs LCP et Speed Index sont également améliorés.

Unlazyload

Dans le cas ou le système de lazyload de votre site est trop agressif ou ne donne pas le résultats attendus, vous pouvez faire en sorte de le supprimer afin de le remplacer par celui de Fasterize.

Pour cela il vous suffit d'indiquer dans les réglages , les attributs ou classes qui sont ajoutés par votre Lazyload natif et ensuite d'activer celui de Fasterize.

L'unlazyload permet également, en ajoutant un ciblage dédié, d'ajuster votre propre lazyloading en faisant en sorte que les visuels qui sont au dessus de la ligne de flotaison ne soient pas lazyloadés.

Balise Image

Image inlining (Base 64)

L'inlining d'images en Base64 permet de réduire le nombre de requêtes HTTP nécessaires, ce qui peut améliorer la performance de chargement des pages web. Cela est particulièrement utile pour les petites images comme les icônes.

Image Dimension Attributes

Cette option vous permet de générer la largeur et la hauteur de la balise img en html pour améliorer le CLS.

Optimisation d'images

L'option d'optimisation d'images permet d'étendre les optimisations aux images situées dans des balises HTML personnalisées. Elle identifie les attributs des balises HTML pouvant contenir des URLs d'images et les optimise pour améliorer la performance du site. Cette fonctionnalité est particulièrement utile pour les balises HTML non standards ou générées dynamiquement.

Images Responsive

L'option d'images responsives permet la génération automatique d'images adaptées aux différentes tailles d'écran et types de dispositifs. L'offset spécifie le nombre d'images à ignorer pour le chargement différé.

Le redimensionnement permet d'ajuster les images via les paramètres d'URL. Utilisez les paramètres de requête comme frz-width, frz-height, frz-fit, frz-gravity, et frz-enlarge pour contrôler les dimensions et l'ajustement des images.

⇒ En savoir plus sur le redimensionnement des images