Images web optimisées : AVIF, WebP et lazy-load UX

Résumer le contenu avec l’IA :

Sur de nombreux sites de collectivités et de destinations touristiques, les images web concentrent une grande partie du poids des pages. C’est logique : ces sites reposent souvent sur des photos de territoire, des visuels de services, des cartes, des bannières, des actualités illustrées et des listings riches. Le problème ne vient donc pas de la présence des images elle-même. Il vient surtout de la manière dont elles sont préparées, dimensionnées et chargées. Aujourd’hui, les bonnes pratiques convergent clairement vers trois leviers complémentaires : utiliser des formats modernes comme AVIF et WebP, servir des images réellement adaptées à l’écran, et appliquer le lazy-load avec discernement. Les références techniques actuelles recommandent explicitement WebP et AVIF pour leurs gains de compression, tout en rappelant que le responsive image et la priorisation de l’image LCP sont tout aussi déterminants pour les performances réelles.

Le sujet est toutefois plus subtil qu’un simple “allégez vos images”. Une image trop compressée peut nuire à la lisibilité d’un lieu, d’un équipement ou d’un patrimoine. Une image servie dans un format moderne mais à une taille disproportionnée reste coûteuse. Un lazy-load appliqué partout peut même détériorer l’expérience utilisateur en retardant l’affichage des visuels les plus importants. L’enjeu n’est donc pas seulement de réduire des kilo-octets. Il consiste à trouver un équilibre crédible entre performance, écoconception, accessibilité, qualité perçue et référencement. Pour une mairie, une intercommunalité ou un office de tourisme, cet arbitrage compte directement : un site doit rester attractif, rapide, fiable et lisible sur mobile comme sur desktop.

Pourquoi les images restent un point critique sur les sites publics et touristiques

Les images influencent bien davantage que le seul poids total d’une page. Elles pèsent sur le temps d’affichage perçu, sur le Largest Contentful Paint, sur la consommation de données mobiles et sur le confort d’usage, notamment lorsqu’un visiteur consulte une page dans des conditions réseau imparfaites. Les recommandations de web.dev sur le LCP rappellent d’ailleurs qu’une image principale mal gérée constitue très souvent un frein direct aux Core Web Vitals.

Dans les univers territoriaux et touristiques, la difficulté est encore plus forte. Un site institutionnel diffuse des contenus nombreux, souvent maintenus par plusieurs contributeurs. Un site touristique, lui, a besoin d’images séduisantes pour donner envie de visiter, réserver ou se déplacer. Dans les deux cas, la tentation est fréquente : téléverser une image “grande et propre”, laisser le CMS se débrouiller, puis activer une optimisation générique en espérant que cela suffise. En pratique, cette approche donne souvent un résultat moyen : visuels trop lourds, miniatures surdimensionnées, image de couverture trop tardive au chargement, ou décalages de mise en page lors de l’apparition des médias.

Le point important est le suivant : une bonne stratégie image ne repose pas sur un seul réglage miracle. Elle combine le bon format, la bonne taille, le bon niveau de compression et le bon moment de chargement. C’est cette combinaison qui permet de réduire le poids sans détériorer l’UX.

AVIF et WebP : de très bons formats, à condition de les utiliser pour de bonnes raisons

Les formats AVIF et WebP sont désormais bien installés dans l’écosystème web. MDN les recommande comme formats performants pour le web, et les données de compatibilité publiées par Can I Use montrent une prise en charge très large dans les navigateurs récents. Can I Use indique une couverture mondiale d’environ 96,19 % pour AVIF et 96,96 % pour WebP, ce qui en fait aujourd’hui des formats réalistes pour un déploiement en production sur des sites grand public.

AVIF est particulièrement intéressant quand l’objectif prioritaire est la réduction du poids à qualité visuelle comparable. Il permet souvent d’aller plus loin que WebP en matière de compression, surtout sur des photographies riches en détails ou en dégradés. WebP reste toutefois extrêmement pertinent, car il offre lui aussi de bons gains de compression tout en s’intégrant très facilement dans les chaînes de publication existantes. Dans de nombreux contextes, il constitue un excellent standard opérationnel, notamment lorsqu’une équipe veut avancer vite sans multiplier les cas particuliers.

Cela ne signifie pas que tous les autres formats doivent disparaître. SVG reste le bon choix pour les logos, pictogrammes et éléments vectoriels qui doivent rester nets à toutes les tailles. PNG conserve un intérêt dans certains cas précis, par exemple lorsqu’un rendu sans perte ou une transparence particulière est nécessaire. Le sujet n’est donc pas de convertir aveuglément toute la médiathèque. Il faut raisonner selon l’usage réel de l’image. Une photo d’en-tête, une vignette de carte, un logo, une infographie simple et une image décorative n’ont ni les mêmes contraintes ni les mêmes attentes de qualité. MDN recommande d’ailleurs SVG pour les images qui doivent être dessinées avec précision à différentes tailles.

Autrement dit, le bon réflexe n’est pas « AVIF partout », mais plutôt « quel format sert le mieux ce type d’image, dans ce contexte, pour cet usage ». C’est une nuance importante, car elle évite les décisions purement techniques déconnectées du rendu final.

Le redimensionnement est souvent plus décisif que le format

L’erreur la plus fréquente n’est pas toujours le mauvais format. C’est souvent la mauvaise taille. Une image peut être convertie en WebP ou en AVIF, tout en restant beaucoup trop lourde si elle est servie en 2000 ou 2500 pixels alors qu’elle s’affiche réellement dans une zone de 400 ou 600 pixels. Dans ce cas, le navigateur télécharge inutilement des données dont l’utilisateur ne profite pas visuellement.

C’est précisément pour cela que les images responsive jouent un rôle central. Les mécanismes HTML comme srcset et sizes permettent au navigateur de choisir la ressource la plus adaptée selon l’écran, la densité de pixels et la mise en page. MDN présente ces mécanismes comme la base du responsive image, justement pour éviter de servir la même image lourde à tous les contextes d’affichage.

Pour une collectivité ou une destination touristique, cette logique change beaucoup de choses. Une image hero n’a pas besoin d’être identique sur desktop large, tablette et mobile. Une vignette de carte d’actualité ou de fiche séjour n’a aucune raison d’être servie dans la même définition qu’un bandeau. Une galerie photo peut elle-même s’appuyer sur plusieurs gabarits selon la zone d’affichage. En structurant la production d’images par composants plutôt que page par page, on gagne en cohérence, en sobriété et en qualité de maintenance.

C’est aussi un sujet d’UX. Quand une image est correctement redimensionnée, elle apparaît plus vite, mobilise moins de bande passante et participe à une page plus stable. À l’inverse, une image surdimensionnée ralentit parfois le rendu sans bénéfice perceptible. Sur mobile, où les contraintes réseau et les usages rapides sont fréquents, cet écart se ressent immédiatement.

Le lazy-load est utile, mais seulement lorsqu’il sert vraiment l’expérience

Le lazy-load a parfois été présenté comme une solution universelle. Ce n’est pas le cas. Son intérêt est réel pour les images situées sous la ligne de flottaison, parce qu’il permet de différer le chargement de contenus non immédiatement visibles et de libérer des ressources pour le démarrage critique de la page. Les ressources de web.dev le rappellent clairement : différer les images hors écran peut améliorer la phase initiale de chargement.

En revanche, appliquer loading="lazy" à une image critique est une mauvaise idée. Les recommandations sur l’optimisation du LCP insistent au contraire sur la nécessité d’identifier l’image principale et de la prioriser si elle constitue l’élément LCP probable. web.dev recommande notamment fetchpriority="high" pour une image susceptible d’être l’élément LCP, et précise qu’une combinaison avec un lazy-load sur une image hors écran n’a pas de réel intérêt.

Concrètement, cela signifie qu’une image hero, une grande photo d’introduction ou un visuel immédiatement visible au chargement ne doit généralement pas être lazy-loadé. Sinon, la page peut donner une impression de vide ou de lenteur, même si le poids théorique total a diminué. L’utilisateur, lui, ne juge pas un site sur la finesse de sa configuration technique. Il juge ce qu’il voit apparaître, et à quel moment.

Pour les sites publics et touristiques, la règle pratique est donc simple. Les images au-dessus de la ligne de flottaison doivent être chargées normalement, avec une vraie réflexion sur leur priorité. Les images plus basses dans la page, les galeries secondaires, les illustrations de blocs non immédiatement visibles ou les médias de pages très longues sont de bons candidats au lazy-load.

Lazy-load et SEO : il faut rester compatible avec le crawl

Le lazy-load n’est pas seulement un sujet de performance. C’est aussi un sujet de visibilité dans les moteurs. Google Search Central explique clairement qu’un lazy-load mal implémenté peut masquer du contenu à Google, en particulier si le chargement dépend d’une interaction de l’utilisateur ou si les ressources ne sont pas correctement accessibles lors du rendu. Les bonnes pratiques mobile-first rappellent également qu’il ne faut pas lazy-loader le contenu principal sur interaction.

Pour un site de destination touristique, ce point est loin d’être théorique. Si des images importantes de pages stratégiques ne sont pas correctement rendues ou indexables, on peut affaiblir la visibilité de contenus pourtant structurants. Pour un site institutionnel, le problème peut concerner des visuels utiles à la compréhension d’un service, d’un équipement, d’un événement ou d’un territoire.

Il faut donc garder une règle claire : le lazy-load ne doit jamais devenir une couche qui complique l’accès au contenu principal. Il doit rester un mécanisme de report sur ce qui est secondaire au démarrage, pas un filtre qui rend les ressources essentielles moins accessibles.

Optimiser sans dégrader l’UX : la vraie ligne de crête

Un site plus léger n’est pas automatiquement un site plus agréable. Une photo très compressée peut perdre sa lisibilité. Un cadrage mal géré peut rendre un lieu moins identifiable. Une image qui arrive trop tard peut casser la perception de fluidité. Une mise en page qui bouge quand les médias apparaissent dégrade immédiatement le confort de lecture.

C’est pour cela que la qualité perçue doit rester un critère de décision. MDN rappelle l’importance de renseigner les dimensions des images, notamment avec le chargement différé, afin d’éviter les problèmes de rendu et les déplacements de mise en page. Cette précaution est essentielle pour préserver la stabilité visuelle.

Sur un site de collectivité, l’UX attendue est souvent une UX de confiance : obtenir rapidement l’information, repérer les bons contenus, ne pas subir une page instable. Sur un site touristique, l’UX attendue combine confiance et désirabilité : le visuel doit être beau, mais aussi arriver au bon moment, sans ralentir inutilement la consultation. La bonne optimisation image est donc celle qui reste discrète. L’utilisateur ne doit pas avoir à remarquer l’effort technique. Il doit seulement bénéficier d’un site plus fluide.

Une méthode simple pour améliorer un site existant

Sur un site déjà en ligne, il n’est pas nécessaire de tout reprendre d’un seul bloc. La première étape consiste à identifier les images qui comptent vraiment : celles qui occupent le haut des pages, celles qui pèsent le plus lourd et celles qui reviennent le plus souvent dans les gabarits stratégiques. C’est généralement là que se trouvent les gains les plus visibles.

La deuxième étape consiste à définir des gabarits utiles par usage. Une image de bannière, une image de carte, une image d’article et une image de galerie ne doivent pas être traitées de la même façon. Ce travail de cadrage évite ensuite la dérive classique : une seule image source, réutilisée partout, pour tous les écrans.

Vient ensuite la logique de diffusion. Les formats modernes peuvent être généralisés progressivement, en privilégiant les images éditoriales et photographiques. Le responsive image doit être mis en place sur les composants qui génèrent le plus de trafic ou le plus de poids. Enfin, le lazy-load doit être réservé aux contenus réellement hors écran au chargement initial.

Cette démarche est particulièrement intéressante dans un contexte de gouvernance éditoriale. Elle permet de transformer un sujet souvent subi par les contributeurs en cadre clair : quels formats produire, quelles tailles prévoir, quelles images prioriser, quelles images différer. C’est souvent à ce niveau que l’on obtient les gains les plus durables.

Les erreurs à éviter absolument

La première erreur consiste à croire que convertir en AVIF ou WebP suffit. Sans réflexion sur les dimensions, le gain reste partiel. La deuxième consiste à appliquer le lazy-load à toutes les images, y compris les plus visibles. La troisième est de négliger l’image LCP, alors qu’elle a souvent un effet direct sur la vitesse perçue. La quatrième consiste à opposer qualité visuelle et performance, comme s’il fallait forcément sacrifier l’une pour améliorer l’autre. Les ressources actuelles montrent au contraire qu’une bonne priorisation, des formats modernes et des images responsive permettent d’améliorer simultanément performance et qualité de diffusion.

Conclusion

Optimiser les images ne consiste pas à enclencher une compression automatique puis à espérer un résultat satisfaisant. C’est un travail d’arbitrage. Il faut choisir le bon format, servir la bonne taille, réserver le lazy-load aux bons emplacements et protéger l’expérience sur les visuels critiques. AVIF et WebP apportent aujourd’hui une base solide. Le responsive image reste indispensable pour éviter les surcoûts invisibles. Et le lazy-load n’est réellement utile que lorsqu’il s’applique à des contenus secondaires au démarrage. Pour une collectivité ou une destination touristique, cette approche a une vertu très concrète : elle améliore en même temps la rapidité perçue, le confort de navigation, la sobriété numérique et la qualité globale du site. C’est précisément ce qui fait une optimisation utile : une optimisation que l’utilisateur ressent positivement, sans jamais avoir à penser à la technique.

FAQ

AVIF est-il meilleur que WebP ?

AVIF offre en général une compression plus efficace que WebP, ce qui en fait un très bon choix pour réduire le poids des images photographiques. WebP reste toutefois excellent et souvent plus simple à généraliser dans une chaîne de production existante. Les deux formats sont aujourd’hui largement pris en charge par les navigateurs modernes.

Faut-il convertir toutes les images en AVIF ou WebP ?

Non. Le bon choix dépend du type d’image. Les photos éditoriales sont de très bons candidats. Les logos et pictogrammes restent souvent mieux servis en SVG. Certaines images particulières peuvent encore justifier PNG selon le besoin de rendu.

Le redimensionnement est-il vraiment indispensable ?

Oui. Servir la bonne taille d’image est souvent aussi important que choisir le bon format. Les mécanismes srcset et sizes existent précisément pour permettre au navigateur de charger la ressource la plus adaptée au contexte d’affichage.

Faut-il activer le lazy-load sur toutes les images ?

Non. Les images visibles dès l’arrivée sur la page, notamment l’image hero ou l’image LCP probable, ne doivent généralement pas être lazy-loadées. Le lazy-load est surtout pertinent pour les images situées plus bas dans la page.

Le lazy-load peut-il nuire au SEO ?

Oui, si l’implémentation empêche Google d’accéder correctement aux images ou si le chargement dépend d’une interaction utilisateur. Google recommande une mise en œuvre compatible avec le rendu et le crawl, en particulier dans un contexte mobile-first.

Comment éviter que les images dégradent l’UX ?

Il faut travailler simultanément le format, les dimensions, la priorité de chargement et la stabilité visuelle. Renseigner les dimensions des images, éviter de retarder les visuels critiques et préserver une qualité perçue cohérente sont des points essentiels.

Images : formats (AVIF/WebP), redimensionnement et lazy-load sans dégrader l’UX