Optimiser les images pour le web : formats, compression et vitesse en 2026

Optimiser les images pour le web est l’un des gestes les plus rentables pour accélérer un site. Les images restent le premier poste de poids des pages, et dans la grande majorité des cas, c’est une image qui détermine le temps d’affichage principal mesuré par Google.

Ce dossier détaille la méthode complète pour optimiser une image pour le web : choisir le bon format (JPEG, PNG, WebP, AVIF, SVG), régler la compression, redimensionner à la bonne taille pour les écrans Retina, servir des images responsives, charger au bon moment, puis automatiser le tout sur WordPress ou une boutique en ligne. Vous y trouverez un comparatif des formats, une démonstration de compression mesurée sur une vraie photo et un calculateur de taille d’export.

Pourquoi optimiser les images de votre site web

Les images pèsent lourd. D’après le Web Almanac 2025 de HTTP Archive, la page d’accueil médiane charge environ 1 Mo d’images sur ordinateur et 900 Ko sur mobile. C’est le premier type de ressource en poids, devant le JavaScript.

Elles pèsent aussi sur les Core Web Vitals. Le même rapport indique qu’une image est l’élément principal affiché (le LCP, Largest Contentful Paint) sur environ 85 % des pages sur ordinateur et 76 % sur mobile. Autrement dit, sur la plupart des sites, la vitesse perçue dépend d’abord d’une image : celle du bandeau, d’un produit ou d’un article.

Les bénéfices d’une bonne optimisation des images s’additionnent :

• des pages plus rapides, surtout sur mobile et sur les connexions lentes ;
• de meilleurs Core Web Vitals, qui font partie des signaux d’expérience pris en compte par Google ;
• moins de rebond et plus de conversions, car chaque seconde d’attente fait partir une partie des visiteurs ;
• moins de bande passante et de stockage, chez l’hébergeur comme sur les sauvegardes.

Pour mesurer l’effet de vos images sur votre propre site, commencez par un test de vitesse de site : les rapports signalent les images trop lourdes et le gain possible.

Optimiser les images pour le web : la méthode en 7 étapes

Voici l’ordre que nous recommandons. Chaque étape est détaillée plus bas.

1. Choisir le format adapté au contenu : photo, illustration, logo, capture d’écran.
2. Redimensionner à la taille d’affichage maximale, multipliée par la densité de l’écran.
3. Compresser avec le bon niveau de qualité, en vérifiant le résultat à l’œil.
4. Supprimer les métadonnées inutiles (données EXIF, profils, vignettes intégrées).
5. Servir plusieurs tailles avec srcset et sizes, pour que chaque écran reçoive la bonne.
6. Charger au bon moment : en priorité l’image principale, en différé les images situées plus bas.
7. Automatiser et contrôler : extension ou CDN d’images, puis vérification dans PageSpeed Insights.

Choisir le bon format de fichier

Le format est la décision qui pèse le plus sur le poids final. Le tableau ci-dessous résume les usages de chacun en 2026.

JPEG, PNG et GIF : les formats historiques

Le JPEG reste universel et convient aux photos, mais il compresse moins bien que les formats récents. Le PNG garde des contours nets et gère la transparence, au prix de fichiers lourds pour les photos : à réserver aux captures d’écran avec du texte fin ou aux images qui exigent un PNG. Le GIF animé est à éviter : une vidéo courte ou un WebP animé pèse souvent dix fois moins.

WebP et AVIF : les formats à privilégier

Le WebP, proposé par Google, produit des fichiers nettement plus légers que le JPEG à qualité visuelle comparable, gère la transparence et l’animation. D’après les données Can I Use de juin 2026, il est pris en charge par environ 96 % des navigateurs utilisés dans le monde.

L’AVIF va plus loin encore en compression, surtout sur les photos, avec une prise en charge d’environ 93 % des navigateurs. Il est en revanche plus lent à encoder et parfois moins efficace que le WebP sur les petits visuels à aplats de couleurs. Notre conseil : WebP par défaut, AVIF pour les grandes photos quand votre outil ou votre CDN sait le produire, avec un repli automatique pour les navigateurs anciens.

SVG : pour les logos, icônes et illustrations simples

Le SVG décrit l’image par des formes plutôt que par des pixels. Un logo en SVG reste parfaitement net à toutes les tailles et pèse souvent quelques kilo-octets. Il ne convient pas aux photos. Un SVG doit être nettoyé (outil comme SVGO) et provenir d’une source sûre, car il peut contenir du code.

Et le JPEG XL ?

Le JPEG XL revient sur le devant de la scène : Safari le lit depuis 2023 et Chrome a activé sa prise en charge avec sa version 155, en octobre 2026, après l’avoir retirée en 2022. Le format est prometteur, mais son adoption reste partielle d’un navigateur à l’autre. Pour un site en production, nous recommandons de rester sur WebP et AVIF pour l’instant et de réévaluer en 2027.

Qualité de compression et poids : trouver le bon réglage

Compresser, c’est accepter de perdre de l’information que l’œil ne remarque pas. Tout l’enjeu est de s’arrêter avant que la perte devienne visible. Les outils proposent un curseur de qualité, de 0 à 100 : les valeurs entre 70 et 85 donnent en général le meilleur compromis pour les photos.

Pour vous rendre compte de l’effet réel, nous avons compressé la même photo de 1 600 × 1 067 pixels avec plusieurs réglages. Les extraits ci-dessous sont affichés à 100 %, sans agrandissement.

Original sans perte (PNG)

3,4 Mo

Référence

JPEG qualité 92

336 Ko

90 % de moins que l’original

JPEG qualité 75

167 Ko

95 % de moins que l’original

WebP qualité 80

130 Ko

96 % de moins que l’original

WebP qualité 50

76 Ko

98 % de moins que l’original

JPEG qualité 35

84 Ko

98 % de moins que l’original

Poids de la photo complète (1 600 × 1 067 pixels) pour chaque réglage, mesurés avec l’encodeur standard du navigateur Chrome. Les outils spécialisés (MozJPEG, Squoosh) obtiennent souvent des fichiers encore plus légers. Extraits de 420 × 300 pixels à 100 %.

Les chiffres parlent d’eux-mêmes. L’original sans perte pèse 3,4 Mo ; en JPEG qualité 92, la même photo descend à 336 Ko, puis à 167 Ko en qualité 75, soit deux fois moins pour une différence à peine perceptible. Le WebP qualité 80 fait encore mieux, avec 130 Ko. Deux enseignements. D’abord, entre une qualité élevée et une qualité moyenne, le poids baisse fortement alors que la différence reste à peine visible. Ensuite, à qualité visuelle proche, le WebP pèse moins lourd que le JPEG. En dessous d’un certain seuil, en revanche, les défauts (blocs, flou, halos autour des contours) apparaissent vite : c’est ce seuil qu’il faut trouver pour chaque type d’image.

Compression avec perte ou sans perte

La compression avec perte (lossy) supprime définitivement des détails pour gagner beaucoup de poids. C’est le bon choix pour les photos. La compression sans perte (lossless) réorganise les données sans rien retirer : le fichier est moins léger, mais identique au pixel près. Elle convient aux logos, aux schémas et aux captures d’écran contenant du texte.

Une règle simple : conservez toujours l’original en haute qualité dans vos archives, et ne publiez que des versions compressées. Recompresser plusieurs fois un JPEG déjà compressé accumule les défauts.

Redimensionner les images à la bonne taille

C’est l’erreur la plus fréquente, et la plus coûteuse : publier une image bien plus grande que sa taille d’affichage. Le navigateur télécharge tous les pixels, puis les réduit à l’écran.

La bonne taille d’export se calcule simplement : largeur d’affichage maximale multipliée par la densité de l’écran. Les écrans dits Retina, très répandus sur téléphone, affichent deux à trois pixels physiques par pixel CSS. Une image affichée sur 800 pixels de large mérite donc une version de 1 600 pixels pour rester nette sur ces écrans, mais pas davantage : au-delà de deux fois, le gain de netteté devient imperceptible alors que le poids continue de grimper.

Calculateur : quelle taille et quel poids viser ?

Indiquez la largeur à laquelle votre image s’affiche et le type d’image : le calculateur propose une taille d’export, les largeurs à prévoir pour srcset et un poids cible indicatif.

Images responsives : srcset, sizes et picture

Une seule taille ne peut pas convenir à la fois à un écran d’ordinateur de 1 440 pixels et à un téléphone de 390 pixels. Les images responsives règlent ce problème : vous proposez plusieurs versions et le navigateur choisit la plus adaptée.

• srcset liste les versions disponibles avec leur largeur (400, 800, 1 200, 1 600 pixels).
• sizes indique au navigateur la largeur d’affichage selon l’écran, pour qu’il choisisse sans attendre la mise en page.
• picture permet de proposer plusieurs formats (AVIF, puis WebP, puis JPEG en dernier recours) ou un recadrage différent sur mobile.

WordPress génère automatiquement srcset et sizes depuis la version 4.4. Le point faible reste l’attribut sizes, souvent trop large par défaut : un thème bien réglé l’ajuste à la vraie largeur de la colonne de contenu.

Optimisation images : les bons réglages selon le type de visuel

Tous les visuels ne se traitent pas de la même façon. Une photo de bandeau pleine largeur, une vignette produit et un logo n’ont ni le même format idéal, ni la même taille, ni le même poids acceptable. Le tableau ci-dessous résume les réglages de départ que nous recommandons ; ajustez-les ensuite en vérifiant le résultat à l’œil.

Ces valeurs sont des points de départ issus de la pratique courante, pas des règles absolues. Une photo très détaillée (texture de tissu, paysage) supporte moins bien la compression qu’un fond uni ; une illustration à aplats se compresse au contraire très bien. L’important est d’avoir une règle par type de visuel, appliquée à toutes les images du site, plutôt qu’un réglage au cas par cas.

Combien de temps gagne-t-on ?

Prenons une page d’accueil avec un bandeau de 1,8 Mo et six images de 600 Ko chacune, soit environ 5,4 Mo d’images. Avec les réglages ci-dessus, le bandeau descend autour de 180 Ko et les six images autour de 100 Ko chacune : la page passe à moins de 1 Mo d’images. Sur une connexion mobile, c’est plusieurs secondes de moins avant l’affichage complet, et souvent le passage du LCP de « médiocre » à « bon ». Pour mesurer ce que coûte chaque seconde de chargement, voyez notre article sur le coût du temps de chargement.

Lazy loading et image principale (LCP)

Le chargement différé, ou lazy loading, consiste à ne télécharger une image qu’au moment où le visiteur s’en approche en faisant défiler la page. Il s’active simplement avec l’attribut loading="lazy", que WordPress ajoute automatiquement depuis la version 5.5.

Attention au piège : l’image principale, visible dès l’ouverture de la page, ne doit jamais être chargée en différé. Le Web Almanac 2025 relève pourtant qu’environ une page sur six commet cette erreur, ce qui retarde précisément l’élément que Google mesure. Pour cette image, faites l’inverse : signalez-la comme prioritaire avec fetchpriority="high", ce que WordPress fait automatiquement pour l’image qu’il estime principale depuis la version 6.3.

Éviter les décalages de mise en page

Une image sans dimensions déclarées fait « sauter » le texte au moment où elle se charge. Ce décalage est mesuré par l’indicateur CLS (Cumulative Layout Shift) et agace les visiteurs, qui cliquent parfois au mauvais endroit. La solution tient en deux attributs : indiquez toujours width et height sur la balise img, ou réservez l’espace en CSS avec aspect-ratio. Le navigateur réserve alors la place avant même de recevoir l’image.

Outils pour optimiser une image pour le web

Outils en ligne

Squoosh, l’application gratuite et open source de Google Chrome Labs, est notre recommandation pour optimiser une image à la main : elle fonctionne dans le navigateur, sans envoyer l’image sur un serveur, compare l’original et le résultat côte à côte et exporte en WebP, AVIF ou MozJPEG. TinyPNG et ses équivalents compressent par lots, en ligne.

Logiciels

Les logiciels de retouche courants proposent tous un export pour le web : GIMP (gratuit), Photoshop, Affinity Photo ou Paint.NET. Pour compresser des dossiers entiers sans retoucher, ImageOptim sur Mac et FileOptimizer sur Windows retirent les métadonnées et recompressent sans perte.

Ligne de commande et intégration

Pour les développeurs, les bibliothèques sharp (Node.js), libvips ou ImageMagick automatisent redimensionnement et conversion dans un processus de mise en ligne. C’est la solution la plus fiable pour un site sur mesure qui publie beaucoup d’images.

Des centaines d’images à reprendre ? C’est un travail qui s’automatise. Confiez leur optimisation à nos experts de la vitesse

Optimiser les images sur WordPress

Sur un site WordPress, l’optimisation d’image web est en partie native. WordPress fait déjà une partie du travail : il crée plusieurs tailles à chaque téléversement, génère srcset et sizes, ajoute le chargement différé et la priorité de l’image principale. Depuis la version 5.8, il accepte le WebP, et depuis la 6.5, l’AVIF, à condition que la bibliothèque d’images du serveur (Imagick ou GD) le prenne en charge. Un filtre de développement, image_editor_output_format, permet même de convertir automatiquement les JPEG téléversés en WebP ou en AVIF.

Les extensions d’optimisation d’images

Pour la plupart des sites, une extension reste la solution la plus simple ; notre agence de référencement WordPress l’intègre d’ailleurs aux réglages de performance. Les plus utilisées compressent à l’envoi, traitent les images existantes par lots et convertissent en WebP ou AVIF :

• Imagify et ShortPixel : compression en ligne, conversion WebP et AVIF, plusieurs niveaux de qualité ;
• Smush : compression et chargement différé, version gratuite limitée ;
• Optimus : compression à l’envoi, conversion WebP dans sa version payante.

Ces extensions envoient généralement vos images à leurs serveurs pour les traiter, avec un quota selon l’offre. Vérifiez où se trouvent ces serveurs si la protection des données est un enjeu, et gardez une sauvegarde de la médiathèque avant un traitement en masse.

PrestaShop, WooCommerce et Shopify

Sur WooCommerce, les mêmes extensions s’appliquent aux images produits, qui sont souvent les plus nombreuses. PrestaShop régénère des miniatures pour chaque format d’image défini dans le thème : supprimez les formats inutilisés avant de régénérer, et activez le WebP si votre version le propose. Shopify, enfin, sert automatiquement des formats modernes et plusieurs tailles depuis son propre CDN : votre travail consiste surtout à téléverser des originaux propres et pas démesurés. Pour des photos produits réussies dès la prise de vue, voyez nos conseils de shooting produit à petit budget.

CDN d’images et mise en cache

Un CDN d’images va plus loin qu’un CDN classique : il redimensionne, convertit et compresse à la volée, puis sert à chaque navigateur le format qu’il sait lire depuis un serveur proche de lui. C’est la solution la plus confortable pour un site à fort trafic ou international, réparti par exemple entre la France, la Suisse, la Belgique et le Canada. Nous détaillons ces techniques dans notre article sur le CDN, WebP, AVIF et HTTP/3.

Dans tous les cas, configurez une longue durée de cache pour les images : elles changent rarement, et un visiteur qui revient ne devrait pas les retélécharger.

Contrôler le résultat

Une fois les images optimisées, mesurez. PageSpeed Insights et Lighthouse signalent les images trop lourdes, mal dimensionnées, dans un format ancien ou chargées en différé alors qu’elles sont visibles. Le panneau Réseau des outils de développement du navigateur montre le poids réel de chaque image téléchargée. Et pour suivre ces indicateurs dans la durée, un monitoring de site web alerte quand une nouvelle image de 3 Mo vient alourdir la page d’accueil.

Checklist avant de publier une image

• Le format correspond au contenu : WebP ou AVIF pour une photo, SVG pour un logo.
• La largeur ne dépasse pas deux fois la largeur d’affichage maximale.
• Le poids respecte la cible de son type (moins de 200 Ko pour un bandeau).
• Les métadonnées inutiles ont été supprimées.
• Les attributs width et height sont présents, ou l’espace est réservé en CSS.
• L’image principale n’est pas chargée en différé ; les autres le sont.
• Le nom de fichier est descriptif (« canape-cuir-cognac.webp », pas « IMG_4821.jpg »).
• Le texte alternatif décrit ce que montre l’image.

Imprimez-la, ou mieux : confiez-la à votre outil de publication, pour qu’aucune image ne passe entre les mailles. Si votre site est lent malgré tout, d’autres causes sont peut-être en jeu : notre article sur le site lent et la perte de clients fait le tour des plus fréquentes.

Les erreurs fréquentes

Téléverser les photos telles qu’elles sortent de l’appareil

Un smartphone produit des images de 12 à 50 mégapixels. Même compressées, elles restent bien trop grandes. Redimensionnez avant l’envoi, ou configurez une taille maximale à l’importation.

Charger en différé l’image du bandeau

C’est l’erreur qui dégrade le plus le LCP. L’image principale doit être chargée immédiatement, et en priorité.

Compresser trop fort

Une photo produit floue ou pleine de défauts fait plus de tort aux ventes qu’une seconde de chargement. Vérifiez toujours le résultat à l’œil, à 100 %, sur un écran Retina.

Utiliser un PNG pour une photo

Une photo enregistrée en PNG peut peser cinq à dix fois plus que la même en WebP, pour un rendu identique.

Oublier les images déjà en ligne

Optimiser les nouvelles images ne suffit pas : les anciennes, souvent les plus lourdes, restent dans les pages. Un traitement par lots de la médiathèque est presque toujours rentable.

Négliger le texte alternatif

L’optimisation technique ne remplace pas le référencement des images. Un texte alternatif descriptif et un nom de fichier clair aident Google et les personnes malvoyantes. Notre article Image SEO : 12 conseils couvre ce volet.

Conclusion

Optimiser les images pour le web ne demande ni budget ni outil compliqué. Le bon format, la bonne taille, un réglage de qualité raisonnable, un chargement au bon moment : ces quatre décisions suffisent souvent à diviser le poids d’une page par deux ou trois.

Le plus difficile est de tenir dans la durée, image après image. C’est là qu’une extension, un CDN d’images ou un processus de publication bien réglé font la différence : une fois en place, chaque nouvelle image est optimisée sans que personne n’ait à y penser.

Questions fréquentes sur l’optimisation des images pour le web

Quel format d’image utiliser pour un site web en 2026 ?

Pour les photos, le WebP est le format par défaut le plus sûr : il est lu par environ 96 % des navigateurs et pèse nettement moins qu’un JPEG à qualité comparable. L’AVIF compresse encore mieux les grandes photos, avec une compatibilité d’environ 93 %. Pour les logos et les icônes, préférez le SVG, et gardez le PNG pour les captures d’écran avec du texte fin ou les cas particuliers.

Quelle différence entre compression avec perte et sans perte ?

La compression avec perte supprime définitivement des détails peu visibles pour réduire fortement le poids : elle convient aux photos. La compression sans perte réorganise les données sans rien retirer, ce qui donne un fichier identique au pixel près mais plus lourd : elle convient aux logos, aux schémas et aux captures d’écran. Dans les deux cas, conservez l’original en haute qualité.

Comment les images influencent-elles les Core Web Vitals ?

Une image est l’élément principal affiché (LCP) sur la grande majorité des pages : son poids et son mode de chargement déterminent donc en grande partie cet indicateur. Les images sans dimensions déclarées provoquent aussi des décalages de mise en page, mesurés par le CLS. Une image principale légère, chargée en priorité, et des dimensions toujours indiquées améliorent directement ces deux indicateurs.

Comment optimiser les images pour le référencement Google ?

Côté technique, une image légère, bien dimensionnée et rapide à charger améliore l’expérience et les Core Web Vitals. Côté contenu, donnez à chaque image un nom de fichier descriptif, un texte alternatif qui décrit ce qu’elle montre et placez-la près du texte qui en parle. Ces informations aident Google à comprendre l’image et à la proposer dans Google Images.

Quels plugins WordPress utiliser pour optimiser les images ?

Imagify, ShortPixel, Smush et Optimus sont parmi les extensions les plus utilisées : elles compressent les images à l’envoi, traitent la médiathèque existante par lots et convertissent en WebP, certaines en AVIF. Comparez les quotas des offres gratuites, la localisation des serveurs de traitement et la possibilité de revenir aux originaux. Sauvegardez la médiathèque avant un traitement en masse.

Faut-il redimensionner les images avant de les mettre en ligne ?

Oui. Une image doit être exportée à sa largeur d’affichage maximale multipliée par deux pour rester nette sur les écrans Retina, sans aller au-delà. Une photo de 4 000 pixels affichée sur 800 pixels fait télécharger des données inutiles et ralentit la page, même compressée. WordPress crée ensuite automatiquement les tailles intermédiaires utilisées par srcset.

Nos sources

• HTTP Archive – Web Almanac 2025, chapitre Performance (élément LCP, lazy loading de l’image principale)
• The Image CDN – WebP, AVIF et JPEG (prise en charge Can I Use, juin 2026)
• Make WordPress Core – WordPress 6.5 adds AVIF support
• Wikipédia – JPEG XL (retour dans Chrome 155)
• Squoosh – Google Chrome Labs
• WordPress.org – Optimus