🗜️
← Retour aux guides

Comment optimiser les images pour les performances web

· Tags: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

Comment optimiser les images pour les performances web

Les images représentent 50 à 60 pour cent du total des octets téléchargés d'une page web typique. Chaque image non optimisée ajoute des secondes à votre temps de chargement, augmente votre taux de rebond et nuit à votre classement dans les moteurs de recherche. Les Core Web Vitals de Google — plus précisément le Largest Contentful Paint (LCP) — mesurent directement les performances de chargement des images, ce qui fait de l'optimisation des images l'un des changements ayant le plus grand impact que vous puissiez apporter à votre site web.

Ce guide couvre une stratégie complète d'optimisation des images, des fondamentaux de la compression aux techniques avancées de diffusion.

1. Compresser chaque image avant la publication

Ne téléversez jamais une image brute directement depuis votre appareil photo, votre téléphone ou votre outil de conception. La compression devrait être la première étape de votre flux de travail de publication.

Principes clés :

  • Les photographies tolèrent une compression lossy agressive. Commencez à la qualité 80 pour JPEG et WebP, puis ajustez à la baisse si les objectifs de poids l'exigent.
  • Les captures d'écran, les logos et les graphiques bénéficient d'une compression lossless. Le PNG et le WebP lossless préservent les bords nets et le texte que la compression lossy brouillerait.
  • AVIF offre les meilleurs taux de compression mais nécessite plus de temps d'encodage. Utilisez-le pour les images téléchargées fréquemment et mises à jour rarement.
  • Compressez dans le format d'origine pour éviter les pertes de génération dues à des conversions de format inutiles.

Économies attendues :

Un flux de travail typique qui compresse les images avant le téléversement réduit le poids total des images de 40 à 80 pour cent avec une perte de qualité minimale perceptible.

2. Diffuser les bonnes dimensions

Diffuser une photo de 4000 pixels de large dans un conteneur de 300 pixels de large est l'erreur de performance la plus courante sur le web. Le navigateur télécharge les 4000 pixels puis les réduit, gaspillant de la bande passante et de la mémoire.

Créez plusieurs variantes de taille :

  • 320 à 480 pixels de large pour les écrans mobiles
  • 768 à 1024 pixels de large pour les tablettes
  • 1200 à 1920 pixels de large pour les écrans de bureau
  • 2560 pixels de large pour les écrans Retina haute densité (2x)

Faites correspondre la variante la plus grande à la largeur maximale à laquelle l'image sera affichée dans votre mise en page, multipliée par 2 pour les écrans haute densité (high-DPI).

3. Utiliser des images responsives avec Srcset

Les attributs srcset et sizes en HTML indiquent au navigateur quelle taille d'image télécharger en fonction de la largeur de la fenêtre d'affichage de l'utilisateur et du ratio de pixels de l'appareil.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

Ce seul modèle peut réduire la bande passante des images de 40 à 60 pour cent sur les appareils mobiles sans aucune différence de qualité visible.

4. Optimiser pour le Largest Contentful Paint (LCP)

Le LCP mesure le temps nécessaire au rendu du plus grand élément visible — généralement l'image principale (hero image) —. Google considère un LCP de 2,5 secondes ou moins comme bon.

Pour optimiser le LCP des images :

  • Préchargez l'image principale pour que le navigateur la découvre tôt. Ajoutez <link rel="preload" as="image" href="hero.webp"> à l'en-tête de votre document.
  • Compressez l'image principale de manière agressive — c'est généralement le premier et le plus lourd élément que le navigateur télécharge.
  • Diffusez du WebP ou de l'AVIF pour l'image principale avec un repli JPEG.
  • Dimensionnez correctement l'image principale. Ne diffusez pas une image de 4000 pixels dans un emplacement d'image principale de 1200 pixels.
  • Ne lazy loadez pas l'image principale ni aucune image au-dessus de la ligne de flottaison. Le lazy loading retarde le téléchargement, ce qui nuit au LCP.

5. Activer le lazy loading pour les images sous la ligne de flottaison

Les images qui ne sont pas visibles sur l'écran initial n'ont pas besoin de se charger immédiatement. L'attribut loading="lazy" indique au navigateur de différer le chargement de l'image jusqu'à ce qu'elle soit proche d'entrer dans la fenêtre d'affichage.

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

Le lazy loading réduit le poids initial de la page de 30 à 50 pour cent sur les pages riches en images. Combiné à la compression, l'impact est transformateur.

6. Supprimer les métadonnées des images

Les données EXIF — réglages de l'appareil photo, coordonnées GPS, horodatages — ajoutent des octets inutiles à chaque image. Supprimer les métadonnées permet généralement d'économiser 5 à 15 pour cent du poids du fichier sans aucun changement visuel. Faites de la suppression des métadonnées une étape standard de votre flux de travail de compression.

7. Utiliser un réseau de diffusion de contenu (CDN)

Un CDN distribue vos images sur des serveurs dans le monde entier, réduisant la distance physique entre l'utilisateur et l'image. Cela améliore le Time to First Byte pour les requêtes d'images.

Certains CDN offrent également une transformation d'images à la volée :

  • Négociation automatique du format (diffuser du WebP ou de l'AVIF lorsque c'est pris en charge)
  • Redimensionnement dynamique selon l'appareil et la fenêtre d'affichage
  • Ajustements de compression en temps réel

Si un CDN dédié n'est pas une option, utilisez au minimum HTTP/2 ou HTTP/3 pour permettre plusieurs téléchargements d'images dans une seule connexion.

8. Tenir compte des performances de décodage des images

Les grandes images prennent non seulement du temps à télécharger mais aussi du temps à décoder. Le navigateur doit décompresser les données JPEG, PNG, WebP ou AVIF avant de les afficher. Le JPEG et le WebP se décodent rapidement sur la plupart des appareils, tandis que le décodage de l'AVIF est plus coûteux en calcul — un point à considérer pour les appareils mobiles d'entrée de gamme.

Utilisez l'attribut decoding="async" sur les images non critiques pour permettre au navigateur de les décoder sans bloquer les autres contenus :

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

Construire votre flux de travail d'optimisation

Un pipeline complet d'optimisation d'images ressemble à ceci :

  1. Compressez les images dans leur format d'origine à l'aide d'un outil adapté à la qualité.
  2. Supprimez les métadonnées pendant la compression.
  3. Redimensionnez aux dimensions d'affichage requises, en créant plusieurs variantes.
  4. Implémentez srcset et sizes dans vos modèles HTML.
  5. Préchargez l'image principale, lazy loadez tout ce qui est sous la ligne de flottaison.
  6. Diffusez depuis un CDN pour des performances mondiales.
  7. Mesurez le LCP et le poids total des images avec Lighthouse ou PageSpeed Insights.
  8. Itérez sur les réglages de qualité jusqu'à atteindre votre budget de performance.

Commencez dès aujourd'hui à optimiser vos images avec notre compresseur d'images en ligne gratuit. Téléversez des images au format PNG, JPEG, WebP ou AVIF et téléchargez des versions compressées prêtes pour la production — sans conversion de format, sans compromis sur la qualité.