Le décodage progressif des images est un excellent moyen d'accélérer le chargement des pages et donc d'améliorer l'expérience de navigation sur le Web. Ce billet explique pourquoi et détaille les développements récents de cette approche.

Le décodage progressif des images pour améliorer l'expérience Web

L'importance de la compression d'images

Certaines personnes affirment que puisque les vitesses d'Internet ne cessent d'augmenter, il n'est pas vraiment nécessaire d'améliorer la compression des images. Ils pensent que le format JPEG est suffisant et que, en particulier, le décodage progressif appartient au passé, important pour la navigation sur le Web au début des années 1990 avec des modems à connexion lente, qui ne sont plus utilisés dans le monde moderne.

Je pense que ces personnes ont tort. Oui, l'internet est plus rapide. Cependant, tout le monde ne dispose pas d'un internet à haut débit. Ceux qui en disposent - à la maison ou au travail - ne peuvent pas y accéder à tout moment, notamment lorsqu'ils voyagent. Par ailleurs, la rapidité de l'internet a entraîné l'alourdissement des sites web, le web devenant beaucoup plus visuel avec des images et des vidéos toujours plus nombreuses et plus grandes. Les images représentent une grande quantité de données : chaque pixel est constitué d'au moins trois nombres (R, G et B), chaque nombre nécessitant au moins 8 bits. Ainsi, sans compression, 1 mégapixel équivaut à 3 mégaoctets. Étant donné qu'une page web moyenne contient des images d'une valeur de 2,1 mégapixels, leur envoi, sans compression, sur une connexion 3G à 3 Mbps prendrait au moins 17 secondes - une longue attente !

De plus, nous voulons des images à haute résolution, qui nécessitent une large gamme de couleurs et une gamme dynamique élevée, ce qui n'est pas réalisable avec un codage 8 bits. En résumé, la compression d'images reste une nécessité.

Par essence, la compression d'images sans perte est simple. Le plus difficile est de trouver une représentation plus concise mais, au final, elle représente exactement les valeurs originales des pixels qui y sont entrés. Pour des photographies typiques, la compression sans perte vous accorde un taux de compression de 2:1 seulement, ou peut-être 3:1, ce qui se traduit par 1 mégapixel dans 1 mégaoctet au lieu de 3. Pas mal, mais pas assez.

Il est remarquable que la compression avec perte puisse facilement atteindre des taux de 20:1 sans artefacts visibles. Dans le scénario idéal, ces artefacts ne sont que des différences numériques entre les valeurs des pixels originaux et celles des pixels décodés. Visuellement, à moins que vous ne fassiez un gros zoom, les images sont identiques, mais la compression avec perte ramène une image de 1 mégapixel à une taille beaucoup plus gérable de 150 Ko.

N'oubliez pas que vous comprimez les images en ligne pour améliorer l'expérience de navigation. En dehors des plafonds de données, la taille des fichiers est importante car elle détermine le temps d'attente des utilisateurs pour voir vos images. Plus les fichiers sont petits, plus les images apparaissent rapidement et plus l'expérience de l'utilisateur est agréable.

D'où la promesse du décodage progressif, qui permet aux navigateurs d'afficher le contenu des images avant la fin du chargement des fichiers.

Décodage progressif

Qu'est-ce que le décodage progressif ? Les codecs d'image intelligents organisent les bits compressés de telle manière que même une image partiellement - disons 10 % - chargée, peut être décodée, ce qui donne un aperçu de moindre qualité (ou de moindre résolution). Le codec JPEG, vieux de 30 ans, peut le faire, mais cette fonction, facultative et sous-utilisée, n'est activée par défaut que dans les encodeurs JPEG sophistiqués, comme mozjpeg.

Le décodage progressif peut améliorer l'expérience de navigation d'un autre ordre de grandeur : non seulement il peut réduire une image non compressée de 3 Mo à 150 Ko, mais il affiche l'image après avoir téléchargé seulement 15 Ko. Pour voir les détails, il faut attendre que le transfert soit terminé. Toutefois, si vous faites simplement défiler la page Web, il y a de fortes chances pour que vous puissiez vous faire une idée de l'image à partir de l'aperçu. Pour la page web médiane, la compression avec perte réduit le temps de chargement de l'image de 17 secondes à une seconde seulement, et le décodage progressif peut faire en sorte que le chargement se déroule à une vitesse imperceptible.

PLAYBy clicking the "_QQ_"Play"_QQ_" button, the video is embedded by the provider YouTube. Personal data may be sent to YouTube and cookies may be set by the provider. Therefore, it is possible that the provider stores your accesses and can analyze your behavior. The privacy policy of YouTube and Google can be found at Google Privacy PolicyWatch on YouTube

Prévisualisations et Placeholders

Pour utiliser des codecs non progressifs comme WebP et AVIF tout en générant une expérience de navigation quelque peu progressive, exploitez les Low Quality Image Placeholders (LQIPs). Dans ce cas, vous servez d'abord une version de basse qualité de vos images, puis vous les remplacez par les images réelles avec, par exemple, du JavaScript.

Le spectre est large, allant de simples placeholders (aperçus de très, très basse qualité, par exemple un simple gradient de deux couleurs prédominantes ou une version très floue de l'image basée sur une douzaine de pixels seulement) à des aperçus de basse qualité qui peuvent donner des indications aux utilisateurs sur les images, comme des images de "qualité 30" comme aperçu des images réelles de "qualité 80". Dans le cas d'AVIF et de JPEG XL, vous pouvez intégrer des LQIP, ce qui vous évite de remplacer l'image en externe.

L'inconvénient des prévisualisations séparées ou des espaces réservés est que la taille totale du transfert augmente inévitablement. L'expérience de navigation améliorée offerte par la prévisualisation se détériore parce que l'image finale met plus de temps à arriver, et tous les octets nécessaires à la prévisualisation ou à l'espace réservé, qui sont séparés et redondants, sont finalement gaspillés. Plus les LQIP sont petits, plus leur surcharge est faible - mais aussi moins ils sont utiles en tant qu'aperçu.

En revanche, le décodage progressif ne gaspille pas d'octets pour des prévisualisations séparées : les premiers octets de l'image de haute qualité réelle sont l'image de prévisualisation. Voilà une fonctionnalité bienvenue !

Amélioration de la progressivité

L'état des images progressives, qui sont aussi vieilles que le JPEG, est resté largement le même pendant 20 ou 30 ans. Il est intéressant de noter que cela commence à changer.

Tout d'abord, les navigateurs attendent désormais que les deux canaux chromatiques soient disponibles avant d'afficher un aperçu.

Une autre amélioration récente concerne les techniques de suréchantillonnage qui permettent d'afficher le premier aperçu d'un JPEG progressif, qui est une image à la résolution de 1:8. Fondamentalement, un pixel est disponible comme couleur moyenne pour chaque bloc 8x8, également appelé coefficient de courant continu (CC). Le suréchantillonnage le plus simple possible donnerait une prévisualisation très grossière, pour laquelle il suffit de remplir tous les blocs 8x8 avec la valeur DC, comme ici :

Les navigateurs atteignent maintenant une technique de suréchantillonnage améliorée, qui crée un aperçu moins artéfacté et plus attrayant :

Ces techniques sont destinées aux JPEG progressifs. D'autres améliorations sont à venir pour JPEG XL. Par exemple, vous pouvez encoder progressivement le DC lui-même en JPEG XL pour générer plus rapidement le premier aperçu. Normalement, il faut 10 à 15 % de la taille totale du fichier pour obtenir le DC, qui est le premier aperçu de l'image complète pour un JPEG progressif. Avec le DC progressif, une fonctionnalité de JPEG XL, vous pouvez créer un premier LQIP lorsque seulement un pour cent de la taille totale du fichier est arrivé.

JPEG XL offre deux autres options pour l'encodage progressif avancé :

• Balayages au milieu : En JPEG, les balayages se font toujours de haut en bas. Dans JPEG XL, pour lequel l'encodage se fait par groupes de 256x256 pixels, vous pouvez réorganiser les groupes. Ainsi, vous pouvez commencer chaque balayage par les groupes du milieu, qui contiennent vraisemblablement la partie la plus attrayante de l'image.
• Progression de la saillance : Les balayages progressifs des JPEG doivent fournir la même quantité de nouveaux détails pour chaque partie de l'image. Ce n'est pas le cas pour le JPEG XL. Cela signifie que vous pouvez coder progressivement les images en fonction de la saillance, par exemple en envoyant les visages ou les objets de premier plan d'une image en plus de détails d'abord, et l'arrière-plan ensuite.

Largest Contentful Paint

Largest Contentful Paint (LCP) est une nouvelle mesure de l'expérience utilisateur que Google adoptera pour déterminer le classement des résultats de recherche. Bien que la discussion soit toujours en cours, un consensus a été atteint pour considérer le rendu progressif comme un facteur LCP.

En général, l'amélioration du rendu progressif permet de percevoir des performances web plus rapides et une meilleure expérience utilisateur. LCP permettra de mieux saisir ces améliorations, ce qui se traduira par un meilleur classement dans les moteurs de recherche Google et un meilleur référencement.

La rapidité de JPEG XL

Contrairement à WebP, HEIC et AVIF, JPEG et JPEG XL ont été conçus pour un décodage progressif. Les capacités progressives de JPEG XL sont toutefois supérieures à celles de JPEG. Rappelez-vous que des LQIP raisonnablement attrayants deviennent disponibles avec un transfert de données d'image de seulement un pour cent - et sans avoir besoin de LQIP ou d'images de prévisualisation séparées et redondantes.

En résumé, JPEG XL est un atout pour la navigation, car il réduit la bande passante et affiche les images plus rapidement et avec une plus grande fidélité.

L'article que vous venez de lire est parti d'une traduction libre de l'article "Improve the Web Experience With Progressive Image Decoding" de John Sneyers.