Pourquoi et comment le décodage progressif des images accélère le chargement des pages et améliore l'expérience de navigation sur le Web.

Améliorer l'expérience Web grâce au décodage progressif des images

paper pencil cartoon  Eric Lamy paper pencil cartoon  13 août 2021 paper pencil cartoon  17 août 2021 blue eyes  701 paper pencil cartoon  5 minutes


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.

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.

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.

browsers now wait until both chroma channels are available before showing a preview

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 :

the upsampling techniques

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

an improved upsampling technique

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.

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 

Eric Lamy
paper pencil cartoon Article rédigé par Eric Lamy
Bio rapide : Directeur de l'agence Agerix, sa formation en Système d'Information et en marketing lui permet d'avoir une approche des projets très commerciale et technique. Il est le garant d'une relation client de type Gagnant-Gagnant. Que ce soit pour nos développements ou pour nos projets d'intégration, son expertise place le projet client au plus haut niveau qualité.

Lire plus d'article sur le blog agerix.fr

À lire également dans cette catégorie


Dans ce monde hautement compétitif, la survie de votre entreprise dépend de la manière dont vous structurez et mettez en œuvre vos stratégies marketing.

Les stratégies marketing pour avoir une entreprise en bonne santé

Dans ce monde hautement compétitif, la survie de votre entreprise dépend de la manière dont vous structurez et mettez en œuvre vos stratégies marketing. Internet regorge de centaines de marques qui se battent littéralement pour attirer plus de clients jour après jour. Il est donc essentiel que vous tiriez parti de stratégies marketing solides pour que votre marque se distingue des autres.


paper pencil cartoon 08 août 2021 paper pencil cartoon 09/01/21 blue eyes 774

Explications des valeurs noopener, noreferrer et nofollow

Explications des valeurs noopener, noreferrer et nofollow

Si vous êtes impliqué dans le développement web ou l'optimisation des moteurs de recherche (SEO), il y a de fortes chances que vous soyez tombé sur les termes noopener, noreferrer et nofollow. Qu'est-ce que noopener noreferrer ? Qu'en est-il du nofollow ? Dans cet article, nous vous expliquons tous ces termes et leurs implications sur le référencement et la sécurité web.


paper pencil cartoon 09 septembre 2021 paper pencil cartoon 09/23/21 blue eyes 431

Core Web Vitals : guide SEO complet pour des temps de chargement plus courts de vos pages

Core Web Vitals : guide complet pour optimiser les temps de chargement des pages

Qu'est-ce que la vitesse d'une page aujourd'hui, comment la mesurer et comment améliorer les scores de vos pages avec les Core Web Vitals ? Voyons cela ensemble..


paper pencil cartoon 08 août 2021 paper pencil cartoon 09/13/21 blue eyes 1020

Viva Connections : ce que votre intranet pourrait être

Viva Connections : ce que votre intranet pourrait être

Avec Microsoft Viva, les entreprises pourraient disposer d'une nouvelle plateforme pour l’expérience de l’employé (EXP) qui rassemble les communications, les connaissances, l'apprentissage, les ressources et les points de vue dans une collection d'applications livrées en équipes. Voici comment Viva Connections pourrait être la passerelle vers un intranet orienté Expérience des Employés.


paper pencil cartoon 02 février 2021 paper pencil cartoon 07/02/21 blue eyes 1359

Comment améliorer facilement votre classement SEO grâce à du contenu visuel

Améliorez facilement votre classement SEO grâce à du contenu visuel

Le contenu visuel est un outil puissant lorsqu'il est exploité et utilisé à son plein potentiel. Améliorez votre classement dans les moteurs de recherche grâce à ce contenu.


paper pencil cartoon 02 février 2021 paper pencil cartoon 09/17/21 blue eyes 219

Quelles sont les tendances du marketing numérique pour 2021 ?

Quelles sont les tendances du marketing numérique pour 2021?

L'industrie du jeu est l'une des plus prospères grâce à ses stratégies de marketing numérique. L'une des raisons de son succès est de rester à la pointe des nouvelles tendances et de s'adapter constamment aux changements. Dans un monde où les produits sont pratiquement indiscernables les uns des autres, nous devons concentrer tous nos efforts pour nous différencier de nos concurrents et dynamiser notre activité en utilisant à notre avantage les derniers développements du marketing numérique, et le casino en ligne est l'un des exemples à suivre. Quelles sont les tendances pour 2021 ?


paper pencil cartoon 01 janvier 2021 paper pencil cartoon 05/23/21 blue eyes 1100

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 


Agerix : Agence digitale Gauloise
4 rue Jean Moulin 33310 Lormont, France , Tel:+33 5 35 54 92 03 , Fax:+33 9 72 14 74 74 , E-mail: contact(at)agerix.fr
Confidentiel Agence Agerix © 2019 S.A.R.L au capital de 8500 euros. RCS Bordeaux 812 619 062.
A.P.E 6202A N° identification T.V.A FR42812619062