# Optimiser les images pour le web sans perte de qualité
[Canonical HTML page](https://gradiently.design/fr/guide/lighthouse-image-performance)
Les images sont généralement la partie la plus lourde d’une page et la raison des plaintes de Lighthouse. Voici une méthode qui marche : les bonnes tailles en pixels, le bon format, un balisage responsive et des indications de chargement, sans perte visible.
## The short version
- Pour optimiser les images pour le web, exportez chaque image à la taille où elle s’affiche, environ doublée pour les écrans haute densité, plutôt que de mettre en ligne l’original.
- AVIF et WebP produisent des fichiers bien plus légers que JPEG et PNG pour une qualité visuelle proche, et tous les navigateurs actuels prennent en charge WebP.
- Les attributs srcset et sizes permettent au navigateur de télécharger la plus petite image qui reste nette sur chaque écran.
- Chargez en différé les images sous la ligne de flottaison avec loading="lazy", mais chargez l’image principale du hero immédiatement avec fetchpriority="high", car c’est souvent elle qui détermine le Largest Contentful Paint.
- Indiquez toujours width et height sur les images pour que le navigateur réserve l’espace et que la mise en page ne saute pas pendant le chargement.
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.
| Image | Affichée à | Largeur d’export |
| --- | --- | --- |
| Hero pleine largeur | Jusqu’à 1920 px | 1920 px, plus des versions plus petites |
| Image d’article | Environ 720 px | 1440 px |
| Vignette de carte | Environ 360 px | 720 px |
| Avatar | 48 px | 96 px |
| Image Open Graph | Hors du site | 1200×630 exactement |
Des cibles habituelles. Le hero pleine largeur fait exception au doublement : 1920 px couvrent la plupart des écrans, et les très grands écrans reçoivent une image un peu douce pour un coût raisonnable.
- Hero de site 1920×1080: 1920 × 1080
- Bannière de blog 1200×600: 1200 × 600
- Aperçu de lien 1200×630: 1200 × 630
Trois tailles d’images web courantes, à l’échelle. Créez à la taille finale pour que rien ne soit recadré ni mis à l’échelle après l’export.
## É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](https://gradiently.design/fr/guide/webp-images) et [PNG ou JPG](https://gradiently.design/fr/guide/png-vs-jpeg) détaillent chaque duo.
| Format | Idéal pour | Remarques |
| --- | --- | --- |
| AVIF | Photos, dégradés, grands heros | Fichiers les plus légers ; encodage plus lent |
| WebP | Presque tout | Avec ou sans perte, transparence, large prise en charge |
| JPEG | Photos, en solution de repli | Pas de transparence ; bandes sur les dégradés lisses |
| PNG | Captures d’écran, graphismes en aplats, transparence | Sans perte, et lourd pour les photos |
| SVG | Logos, icônes, illustrations | Vectoriel, minuscule quand il est simple ; voir [SVG ou PNG](https://gradiently.design/fr/guide/svg-vs-png) |
Choisissez selon le contenu, pas par habitude. Les dégradés lisses sont le cas le plus difficile pour le JPEG, et c’est là que WebP et AVIF aident le plus.
> **Les dégradés se compressent mal** Les transitions de couleur douces révèlent la compression sous forme de paliers visibles. Ajoutez un peu de grain avant l’export, comme l’explique [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding), et l’encodeur peut compresser davantage sans que personne ne le voie. Mieux encore : dessinez les dégradés web en CSS.
Un dégradé de hero en 70 octets environ: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`
Ce dégradé, en CSS, pèse moins qu’une seule ligne de la page. Exporté en image 1920×1080, le même rendu pèserait de nombreux kilo-octets. Voir [la performance des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance).
## É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](https://gradiently.design/fr/guide/image-compression) 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.
```html
```
Le navigateur utilise la première source qu’il prend en charge. L’élément img sert à la fois de repli et d’emplacement pour alt, width, height et les indications de chargement.
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
```html
```
Width et height permettent au navigateur de réserver l’espace d’après le ratio, pour que rien ne bouge à l’arrivée des images. Le CSS peut toujours rendre l’image fluide avec `max-width: 100%` et `height: auto`.
### Erreurs courantes
- `loading="lazy"` sur l’image du hero
- Pas de width ni de height, la page saute
- Un seul énorme fichier pour tous les écrans
- Un JPEG pour un logo en aplats ou une capture d’écran
- Des fonds dégradés enregistrés en images
### À la place
- Le hero se charge immédiatement avec `fetchpriority="high"`
- Les deux attributs sur chaque img
- `srcset` avec trois ou quatre largeurs
- SVG ou PNG pour les graphismes en aplats
- Des dégradés CSS, avec du grain si besoin
Ces indications correspondent directement aux Core Web Vitals. L’image du hero est souvent l’élément du Largest Contentful Paint, que [web.dev](https://web.dev/articles/lcp) 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](https://gradiently.design/fr/guide/video-background-website).
## Une liste de vérification avant de publier
1. **Mesurez l’emplacement** Trouvez la plus grande largeur d’affichage de chaque image dans votre mise en page.
2. **Exportez aux bonnes tailles** Une à deux fois la largeur de l’emplacement, plus des versions plus petites pour les téléphones.
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. **Compressez à l’œil** Baissez la qualité jusqu’à voir un changement, puis remontez d’un cran.
5. **Balisez** `srcset`, `sizes`, `width`, `height`, `alt`, et le chargement différé sous la ligne de flottaison.
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](https://gradiently.design/fr/guide/open-graph-tags) partent chacun de la taille que la page affichera.
## FAQ
### Comment optimiser les images pour le web sans perdre en qualité ?
Exportez à la taille affichée, utilisez AVIF ou WebP, baissez la qualité seulement jusqu’à voir une différence, et servez plusieurs tailles avec srcset. L’essentiel de la perte visible vient d’une compression trop forte, pas du redimensionnement.
### Quel est le meilleur format d’image pour un site web ?
WebP est le choix moderne sûr par défaut, et AVIF est en général encore plus léger. Utilisez SVG pour les logos et les icônes, et gardez JPEG ou PNG en solution de repli.
### Faut-il charger toutes les images en différé ?
Non. Chargez en différé les images sous la ligne de flottaison, mais chargez l’image principale du hero immédiatement, car la retarder ralentit le Largest Contentful Paint.
### Quelle taille pour les images d’un site web ?
Environ le double de leur largeur d’affichage, pour des écrans haute densité nets. Un hero pleine largeur en 1920 px couvre la plupart des écrans.
### Pourquoi Lighthouse dit-il que mes images ne sont pas correctement dimensionnées ?
Le fichier contient plus de pixels que l’espace qu’il occupe sur la page. Exportez une version plus petite et utilisez srcset et sizes pour que le navigateur choisisse la bonne.
```
Width et height permettent au navigateur de réserver l’espace d’après le ratio, pour que rien ne bouge à l’arrivée des images. Le CSS peut toujours rendre l’image fluide avec `max-width: 100%` et `height: auto`.
### Erreurs courantes
- `loading="lazy"` sur l’image du hero
- Pas de width ni de height, la page saute
- Un seul énorme fichier pour tous les écrans
- Un JPEG pour un logo en aplats ou une capture d’écran
- Des fonds dégradés enregistrés en images
### À la place
- Le hero se charge immédiatement avec `fetchpriority="high"`
- Les deux attributs sur chaque img
- `srcset` avec trois ou quatre largeurs
- SVG ou PNG pour les graphismes en aplats
- Des dégradés CSS, avec du grain si besoin
Ces indications correspondent directement aux Core Web Vitals. L’image du hero est souvent l’élément du Largest Contentful Paint, que [web.dev](https://web.dev/articles/lcp) 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](https://gradiently.design/fr/guide/video-background-website).
## Une liste de vérification avant de publier
1. **Mesurez l’emplacement** Trouvez la plus grande largeur d’affichage de chaque image dans votre mise en page.
2. **Exportez aux bonnes tailles** Une à deux fois la largeur de l’emplacement, plus des versions plus petites pour les téléphones.
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. **Compressez à l’œil** Baissez la qualité jusqu’à voir un changement, puis remontez d’un cran.
5. **Balisez** `srcset`, `sizes`, `width`, `height`, `alt`, et le chargement différé sous la ligne de flottaison.
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](https://gradiently.design/fr/guide/open-graph-tags) partent chacun de la taille que la page affichera.
## FAQ
### Comment optimiser les images pour le web sans perdre en qualité ?
Exportez à la taille affichée, utilisez AVIF ou WebP, baissez la qualité seulement jusqu’à voir une différence, et servez plusieurs tailles avec srcset. L’essentiel de la perte visible vient d’une compression trop forte, pas du redimensionnement.
### Quel est le meilleur format d’image pour un site web ?
WebP est le choix moderne sûr par défaut, et AVIF est en général encore plus léger. Utilisez SVG pour les logos et les icônes, et gardez JPEG ou PNG en solution de repli.
### Faut-il charger toutes les images en différé ?
Non. Chargez en différé les images sous la ligne de flottaison, mais chargez l’image principale du hero immédiatement, car la retarder ralentit le Largest Contentful Paint.
### Quelle taille pour les images d’un site web ?
Environ le double de leur largeur d’affichage, pour des écrans haute densité nets. Un hero pleine largeur en 1920 px couvre la plupart des écrans.
### Pourquoi Lighthouse dit-il que mes images ne sont pas correctement dimensionnées ?
Le fichier contient plus de pixels que l’espace qu’il occupe sur la page. Exportez une version plus petite et utilisez srcset et sizes pour que le navigateur choisisse la bonne.