Comment optimiser les images pour votre site web : guide complet 2026

Les images représentent environ 40 % du poids total d'une page web moyenne. Optimisez-les correctement et vous pouvez diviser la taille de votre page par deux, atteindre un Largest Contentful Paint inférieur à 2,5 secondes et améliorer votre classement dans les résultats de recherche. Voici la démarche complète, étape par étape.

Pourquoi l'optimisation des images est plus importante que jamais

D'après les données HTTP Archive, la page web médiane pèse aujourd'hui environ 2,5 Mo sur mobile, dont environ 1 Mo pour les images. Les Core Web Vitals de Google — en particulier le Largest Contentful Paint (LCP) — mesurent directement la vitesse de chargement de votre plus grand élément visible. Sur la plupart des pages, cet élément est une image.

Le repère : un LCP de 2,5 secondes ou moins est « bon ». Au-dessus de 4 secondes, c'est « mauvais ». Les pages dont le LCP est basé sur une image ont un temps de chargement au 75e percentile près de deux fois plus lent que celles dont le LCP est textuel. La différence entre une image hero bien optimisée et une image trop lourde est souvent la différence entre un score Core Web Vitals vert et rouge.

Étape 1 : choisir le bon format

Le choix du format a le plus grand impact sur la taille du fichier. Voici comment se comparent les principaux formats web, sur la base de benchmarks de compression réels :

Pour la plupart des sites web, WebP est le choix par défaut le plus sûr. Il gère aussi bien les photos que les graphiques, compresse efficacement et fonctionne partout. Si votre stack le permet, servez AVIF en priorité avec WebP en repli grâce à l'élément <picture>. Vous pouvez convertir JPG en WebP ou convertir en AVIF avec Vizua — tout s'exécute dans votre navigateur, sans téléchargement.

Pour une comparaison approfondie, consultez notre analyse WebP vs AVIF et notre guide sur la compression avec et sans perte.

Étape 2 : redimensionner aux dimensions d'affichage réelles

Une photo de 4 000 × 3 000 pixels issue de votre appareil photo, affichée à 800 × 600 sur votre site, gaspille environ 80 % de ses pixels. Ces pixels invisibles ont pourtant un coût en bande passante et en temps de traitement.

La règle : servez les images à la taille d'affichage réelle ou proche. Sur un écran standard, faites correspondre exactement les dimensions en pixels. Sur un écran Retina 2×, servez une image deux fois plus large que la taille d'affichage pour la netteté — mais pas davantage.

Dimensions cibles pratiques :

• Hero pleine largeur : 1 600-1 920 px de large (jusqu'à 2× pour Retina)
• Image de contenu blog : 800-1 200 px de large
• Miniature : 300-400 px de large
• Avatar : 64-128 px (jusqu'à 256 px pour 2×)

Utilisez l'outil de redimensionnement de Vizua pour réduire vos images à la largeur exacte dont vous avez besoin avant de les compresser. Cette seule étape peut réduire la taille du fichier de 70-90 %.

Étape 3 : compresser avec le bon réglage de qualité

Après avoir choisi le format et redimensionné l'image, la compression permet d'extraire les économies restantes. Le curseur de qualité compte plus que la plupart des gens ne le pensent — la relation entre qualité et taille de fichier n'est pas linéaire. Passer la qualité JPEG de 100 à 80 économise énormément d'espace ; de 80 à 60, les gains diminuent avec des artefacts visibles.

Réglages de qualité recommandés :

• JPEG : 75-85 — point d'équilibre pour les photos. Un JPEG qualité 80 est typiquement 60-80 % plus petit que l'original non compressé, sans différence visible.
• WebP : 75-80 — qualité visuelle équivalente au JPEG 85, dans un fichier plus petit.
• AVIF : 60-75 — les valeurs basses restent excellentes grâce à l'efficacité du codec.
• PNG : utilisez le niveau de compression maximal (sans perte). Pour des économies supplémentaires, réduisez à 8 bits (256 couleurs) lorsque le graphique le permet.

Le compresseur JPEG de Vizua gère cela automatiquement avec des algorithmes optimisés qui préservent les contours et les dégradés. Pour une analyse détaillée par format, consultez notre guide sur la compression d'images sans perte de qualité.

Étape 4 : livrer les images efficacement

Une bonne compression n'est que la moitié du travail. La façon dont vous livrez les images au navigateur compte tout autant pour les performances.

Définir les dimensions explicites

Incluez toujours les attributs width et height sur vos balises <img> (ou utilisez CSS aspect-ratio). Cela évite les décalages de mise en page — le contenu qui se repositionne lors du chargement des images — ce qui affecte directement votre score Cumulative Layout Shift (CLS).

Activer le chargement différé pour les images sous la ligne de flottaison

Ajoutez loading="lazy" à toute image qui n'est pas visible au premier chargement de la page. Le navigateur différera son téléchargement jusqu'à ce que l'utilisateur défile vers elle, économisant de la bande passante au chargement initial.

Prioriser votre image hero

Faites l'inverse pour votre image la plus importante au-dessus de la ligne de flottaison : ajoutez fetchpriority="high" et assurez-vous qu'elle n'a pas loading="lazy". Les propres tests de Google montrent que les images LCP préchargées atteignent des performances quasi parfaites (374 ms au 75e percentile), tandis que les images LCP en chargement différé sont près de deux fois plus lentes (720 ms).

Utiliser les images responsives

Les attributs srcset et sizes permettent au navigateur de choisir la meilleure variante d'image en fonction de la taille et de la résolution de l'écran. Servez une image de 400 px sur téléphone, 800 px sur tablette et 1 600 px sur bureau — depuis une seule balise <img>.

Étape 5 : auditer et mesurer

L'optimisation n'est pas une tâche ponctuelle. Chaque nouvelle image que vous ajoutez est une occasion de régression.

• PageSpeed Insights : lancez PageSpeed Insights de Google sur vos pages clés. Regardez le score LCP et toute recommandation « Servez les images dans des formats nouvelle génération » ou « Dimensionnez correctement les images ».
• Analyse HTTP Archive : consultez l'onglet Réseau dans les DevTools de votre navigateur. Triez par taille. Si une seule image dépasse 200 Ko, demandez-vous si elle pourrait être redimensionnée, recompressée ou convertie en un meilleur format.
• Automatiser : intégrez l'optimisation des images à votre pipeline de build. Identifiez les images trop volumineuses avant leur mise en ligne.

Liste de contrôle rapide

• Utilisez WebP ou AVIF comme format par défaut
• Redimensionnez les images aux dimensions d'affichage réelles (pas plus larges que nécessaire)
• Compressez : JPEG/WebP à 75-85, AVIF à 60-75
• Définissez width et height sur chaque <img>
• fetchpriority="high" sur votre image hero/LCP
• loading="lazy" sur tout ce qui est sous la ligne de flottaison
• Utilisez srcset/sizes pour la livraison responsive
• Gardez les images hero sous 200 Ko, les miniatures sous 80 Ko
• Supprimez les métadonnées inutiles (EXIF, profils ICC) — voir notre guide sur la confidentialité des données EXIF
• Auditez régulièrement avec PageSpeed Insights

Questions fréquentes