Optimiser les images pour la vitesse d'un site (WebP vs AVIF) | We.Inc
Choisissez le bon format, redimensionnez avec srcset, chargez en lazy les bonnes images et jamais le hero. Inclut un générateur de balises pour picture, srcset et fetchpriority.
Comment optimiser les images d'un site web
Optimiser les images se résume à quatre gestes : choisir le format adapté à l'image, n'exporter que les largeurs en pixels dont la mise en page a besoin, compresser chaque fichier et contrôler le moment où il se charge. Servez de l'AVIF ou du WebP avec un JPEG de secours, listez les largeurs dans srcset, chargez en lazy les images sous la ligne de flottaison et donnez plutôt au hero fetchpriority high.
Quel format pour quelle image
Image
Meilleur format
Format de secours
Photo
AVIF ou WebP
JPEG
Capture d'écran avec du texte
WebP sans perte ou PNG
PNG
Logo, icône, formes simples
SVG
PNG
Animation courte
Vidéo (MP4 ou WebM)
WebP animé
Les images sont généralement la partie la plus lourde d'une page, et le hero est souvent l'élément mesuré pour le Largest Contentful Paint. L'essentiel du gain vient de réglages que vous choisissez une fois : format, largeurs, qualité et comportement de chargement. Le générateur ci-dessous écrit des balises correctes pour ces choix, et la checklist qui suit couvre le reste.
Choisissez le format grâce au tableau : les photos en AVIF ou WebP, les graphismes en aplat en SVG.
Redimensionnez en trois à cinq largeurs qui couvrent des téléphones jusqu'aux grands écrans.
Compressez chaque fichier en vérifiant le résultat en taille réelle pour repérer flou et effets de bandes.
Générez les balises avec le générateur, en marquant le hero en priorité haute et le reste en lazy.
Lancez un test de vitesse de page et consultez les audits liés aux images pour confirmer.
Ne chargez jamais en lazy le hero ni aucune image visible au premier affichage ; web.dev avertit que cela retarde le Largest Contentful Paint.
Définissez toujours width et height pour que le navigateur réserve l'espace et que la mise en page ne bouge pas.
Supprimez les métadonnées de l'appareil photo à l'export ; la localisation et les infos sur l'appareil ajoutent des octets et peuvent divulguer des informations privées.
N'utilisez un arrière-plan CSS que pour la décoration ; les images de contenu vont dans des balises img avec un texte alternatif.
Comparez les réglages de qualité à l'œil à 100 % de zoom, car la bonne valeur varie d'un encodeur à l'autre.
Questions fréquentes
WebP ou AVIF : lequel utiliser ?
Les deux font mieux que le JPEG pour les photos. L'AVIF est le format le plus récent et compresse souvent davantage, tandis que le WebP s'encode plus vite et est pris en charge depuis plus longtemps. Une approche sûre : un élément picture qui propose d'abord l'AVIF, puis le WebP, puis un JPEG dans la balise img pour tout ce qui est plus ancien.
À quoi sert l'attribut sizes ?
Il indique au navigateur à quelle largeur l'image sera affichée, avant le calcul de la mise en page, pour qu'il choisisse le bon fichier dans srcset. Sans sizes, le navigateur suppose que l'image remplit tout le viewport et peut télécharger un fichier bien plus gros que nécessaire.
Faut-il mettre loading lazy sur toutes les images ?
Seulement sur les images sous la ligne de flottaison. Le lazy loading attend que le navigateur sache où se trouve une image, un délai dont vous ne voulez pas pour tout ce que l'on voit immédiatement.
Jusqu'où compresser ?
Baissez la qualité jusqu'à voir tout juste une différence en taille réelle, puis remontez d'un cran. Les photos chargées masquent bien la compression ; les dégradés lisses, les ciels et le texte montrent des artefacts plus tôt.
Faut-il un plugin ou un service pour optimiser les images ?
Non. Vous pouvez redimensionner et convertir dans un éditeur ou avec un outil gratuit dans le navigateur, puis écrire les balises à la main. Les services sont utiles quand vous avez des milliers d'images ou des envois d'utilisateurs à traiter automatiquement.
D'abord le format
Le guide des formats de web.dev le résume ainsi : préférez le vectoriel quand l'image est faite de formes et de texte, et un format matriciel moderne pour les photos. Le PNG conserve chaque pixel à l'identique, ce qui convient aux captures d'écran mais rend les photos inutilement lourdes.
L'élément picture permet de proposer de nouveaux formats sans casser les anciens navigateurs. Le navigateur prend la première source dont il comprend le type et se rabat sur l'img à l'intérieur.
La bonne taille, sur chaque écran
web.dev note qu'envoyer des images taillées pour ordinateur à des téléphones peut consommer deux à quatre fois plus de données que nécessaire, et conseille trois à cinq tailles par image. Listez-les avec des descripteurs de largeur dans srcset et décrivez la mise en page dans sizes.
Mesurez la largeur affichée dans votre mise en page au lieu de deviner. Une carte qui occupe un tiers de l'écran sur ordinateur et toute la largeur sur téléphone a besoin d'une valeur sizes qui dit exactement cela.
L'ordre de chargement
Le lazy loading économise de la bande passante sur les pages longues : mettez donc loading lazy sur les images plus bas dans la page. Pour l'image principale au-dessus de la ligne de flottaison, ajoutez fetchpriority high pour qu'elle soit demandée avant les fichiers moins importants.
decoding async permet au navigateur d'afficher le texte avant d'avoir fini de décoder une grande image. C'est une indication, et les navigateurs peuvent l'ignorer.
Checklist d'optimisation des images
Quoi vérifier et pourquoi
Vérification
Comment
Pourquoi c'est utile
Format moderne
picture avec des sources AVIF et WebP
Des fichiers plus légers pour le même rendu
Largeurs responsive
srcset avec descripteurs w plus sizes
Les téléphones évitent les fichiers taillés pour ordinateur
Compression
Qualité réglée à l'œil selon le type d'image
Moins d'octets par pixel
Dimensions
attributs width et height
Évite les décalages de mise en page
Lazy loading
loading="lazy" uniquement sous la ligne de flottaison
Économise des données sur les pages longues
Priorité du hero
fetchpriority="high" sur l'image principale
Un Largest Contentful Paint plus rapide
Texte alternatif
Décrivez les images de contenu ; alt vide pour la décoration
Accessibilité et recherche d'images
Modèles de balises à copier
AVIF et WebP avec un JPEG de secours
Le navigateur utilise le premier type de source qu'il prend en charge. L'img porte la taille, le texte alternatif et les indications de chargement pour tous les formats.
Redimensionner et convertir par lots avec sharp
Un petit script Node utilisant le package sharp : chaque JPEG de ./src devient trois largeurs WebP dans ./out.
Terrasse en cèdre avec banc intégré au coucher du soleil
Générateur de balises d'image
Indiquez le nom du fichier, les largeurs, les formats et l'emplacement de l'image dans la page. Le générateur écrit les balises picture et img avec les bonnes indications de chargement.