Optimiser les images pour le web sans perte de qualité

Pour optimiser les images pour le web sans perte visible, faites cinq choses : exportez chaque image à la taille en pixels où elle s’affiche (environ le double pour les écrans nets), choisissez un format moderne comme AVIF ou WebP, compressez à une qualité modérée en comparant à l’œil, servez plusieurs tailles avec srcset, et chargez en différé tout ce qui se trouve sous la ligne de flottaison. Ces étapes règlent la plupart des avertissements d’images de Lighthouse et réduisent souvent fortement le poids de la page, car la photo originale tout droit sortie d’un appareil ou d’un outil de design est bien plus grande que ce dont l’écran a besoin.

Étape 1 : exporter à la taille affichée

Une image affichée sur 800 pixels de large n’a pas besoin d’en faire 4 000. Lighthouse signale les images surdimensionnées parce que les pixels en trop sont téléchargés, décodés puis jetés. Mesurez la largeur maximale de l’image dans votre mise en page, puis exportez à environ le double pour les téléphones et ordinateurs haute densité. Aller au delà de deux fois paraît rarement plus net et coûte toujours des octets.

Étape 2 : choisir le bon format

Le format compte plus que n’importe quel curseur de compression. AVIF donne en général le fichier le plus léger, WebP s’en approche et fonctionne partout aujourd’hui, et JPEG et PNG restent des solutions de repli sûres. WebP ou PNG et PNG ou JPG détaillent chaque duo.

Étape 3 : compresser, puis regarder

Les formats avec perte ont un réglage de qualité, et la bonne valeur dépend de l’image. Commencez autour de 75 à 80 pour WebP et de 50 à 60 pour AVIF, exportez, puis comparez à l’original au zoom 100 %. Baissez jusqu’à voir une différence, puis remontez d’un cran. Les visages, les textes fins et les dégradés demandent plus de qualité que les paysages chargés. La compression d’images explique ce que l’encodeur supprime.

Supprimez au passage les métadonnées comme les informations de l’appareil photo et les vignettes intégrées. La plupart des outils d’export le font en une case à cocher, et cela retire des octets que personne ne voit.

Étape 4 : un balisage responsive avec srcset et sizes

Une fois plusieurs largeurs exportées, laissez le navigateur choisir. srcset liste les fichiers et leurs largeurs ; sizes indique au navigateur la largeur d’affichage de l’image. Le navigateur télécharge alors le plus petit fichier assez net pour cet écran.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Pour une image dans une colonne, décrivez la mise en page dans sizes, par exemple sizes="(min-width: 1024px) 720px, 100vw". Un sizes erroné est la raison la plus fréquente pour laquelle un dispositif responsive télécharge quand même le gros fichier.

Étape 5 : les indications de chargement qui comptent

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Ces indications correspondent directement aux Core Web Vitals. L’image du hero est souvent l’élément du Largest Contentful Paint, que web.dev recommande d’afficher en moins de 2,5 secondes, et l’absence de dimensions est une cause classique de décalage de mise en page. Si votre hero est une vidéo plutôt qu’une image, le même raisonnement s’applique aux vidéos en fond de site web.

Une liste de vérification avant de publier

1. 1

   Mesurez l’emplacement

   Trouvez la plus grande largeur d’affichage de chaque image dans votre mise en page.

2. 2

   Exportez aux bonnes tailles

   Une à deux fois la largeur de l’emplacement, plus des versions plus petites pour les téléphones.

3. 3

   Choisissez le format

   AVIF ou WebP pour les photos et les dégradés, SVG pour les logos, PNG seulement quand il l’emporte.

4. 4

   Compressez à l’œil

   Baissez la qualité jusqu’à voir un changement, puis remontez d’un cran.

5. 5

   Balisez

   srcset, sizes, width, height, alt, et le chargement différé sous la ligne de flottaison.

6. 6

   Testez

   Lancez Lighthouse dans une fenêtre de navigation privée et vérifiez les audits d’images et l’élément LCP.

Tout cela est plus simple quand l’image est créée dès le départ à sa taille finale. Dans Gradiently, vous créez une fois et Pro décline la création à toutes les tailles en une étape, puis exporte en PNG, JPG ou SVG aux dimensions exactes jusqu’en 4K : le hero, la bannière et l’image Open Graph partent chacun de la taille que la page affichera.