Les images sont, la plupart du temps, ce qui alourdit le plus une page web. Elles restent pourtant indispensables pour mettre en valeur vos articles ou vos produits. Si vous voulez améliorer la performance et la vitesse de chargement de votre site, une priorité s’impose donc : réduire le poids de vos images et le nombre de requêtes qui leur sont associées. Cela concerne aussi bien les visuels de vos contenus que les images du design (logos, icônes, arrière-plans).
Ce guide couvre l’essentiel de l’optimisation d’images pour le web en 2026 : bien choisir son format, réduire le poids sans casser la qualité, et limiter le travail du navigateur au chargement. L’approche a nettement évolué ces dernières années, avec l’arrivée des formats WebP et AVIF et des techniques natives comme le chargement différé et les images responsives.
En bref. Pour optimiser une image pour le web, cinq gestes suffisent dans la grande majorité des cas : servir un format moderne (WebP par défaut, AVIF quand il est disponible, ils pèsent 25 à 34 % de moins qu’un JPEG à qualité égale), redimensionner l’image à sa taille réelle d’affichage, la compresser avec un outil dédié, activer le chargement différé (
loading="lazy") et servir la bonne résolution selon l’écran (srcsetetsizes). Un CDN d’images peut automatiser une grande partie de ces étapes.
Vous cherchez de nouvelles banques d’images ?
Découvrez notre Top 10 des banques d’images et de sites de photos.
Choisir le bon format : JPEG, PNG, WebP ou AVIF
Plusieurs formats coexistent sur le web. Aujourd’hui, tous les navigateurs modernes prennent en charge WebP, et AVIF est très largement supporté. Voici comment arbitrer.
JPEG : la photo, avec perte
Créé à la début des années 1990, le JPEG est idéal pour les photographies et les images à large spectre de couleurs (plus de 16 millions de nuances). Sa compression entraîne une perte d’informations, d’autant plus visible que l’image contient des zones de fort contraste (effets de blocs, flou). Il reste néanmoins très efficace : à poids égal, un JPEG contient davantage d’informations utiles qu’un PNG. C’est ce qui en a fait, pendant des années, le format phare du web pour les photos. À noter : la plupart des JPEG du web sont « progressifs », c’est-à-dire qu’ils s’affichent d’abord en basse définition avant de se préciser, ce qui améliore la perception de vitesse.
PNG : les aplats et la transparence, sans perte
Apparu au milieu des années 1990, le PNG compresse sans aucune perte de qualité. C’est le format de prédilection pour les images à peu de couleurs, les aplats, les captures d’écran et surtout tout ce qui nécessite de la transparence (logos, éléments d’interface). Sa contrepartie : pour une photographie, un PNG sera bien plus lourd qu’un JPEG. Si vous n’avez pas besoin de transparence sur une photo, le JPEG (ou mieux, le WebP) reste préférable.
WebP : le format par défaut aujourd’hui
WebP, créé par Google, offre une compression supérieure avec et sans perte. D’après la documentation officielle de Google, les images WebP sans perte sont environ 26 % plus légères que les PNG, et les WebP avec perte 25 à 34 % plus légères que des JPEG comparables à qualité visuelle équivalente. Il gère la transparence et convient aussi bien aux photos qu’aux graphiques. En pratique, c’est le format à servir par défaut en 2026 : le gain de poids est réel et le support des navigateurs est universel.
AVIF : la compression la plus poussée
Plus récent, AVIF va encore plus loin dans la compression, souvent au prix d’un encodage un peu plus lent. Il est désormais pris en charge par tous les principaux navigateurs. La bonne pratique consiste à le servir en priorité quand il est disponible, avec un repli automatique sur WebP puis JPEG grâce à la balise <picture>, qui laisse le navigateur choisir le meilleur format qu’il sait afficher.
Quant au GIF, longtemps utilisé pour les animations, il est aujourd’hui presque toujours avantageusement remplacé par une vidéo courte (MP4 ou WebM) ou un WebP animé, bien plus légers.
Vous souhaitez améliorer la vitesse de votre WordPress ?
Découvrez nos techniques pour accélérer votre site WordPress.
Réduire le poids de vos images
Une image lourde met plus de temps à s’afficher. Optimiser son poids repose sur trois gestes simples, à combiner.
Redimensionner à la taille d’affichage
C’est le levier le plus rentable, et le plus souvent négligé. Une image affichée à 800 pixels de large n’a aucune raison d’en faire 4000. Exportez-la à ses dimensions réelles d’affichage avant de l’importer sur votre site. Réduire les dimensions dans le CMS via l’attribut d’affichage ne change rien au poids du fichier téléchargé par le visiteur.
Enregistrer proprement
Au moment d’exporter, utilisez les options d’export optimisé de votre logiciel (les fonctions « Exporter pour le web » de Photoshop ou d’équivalents libres). Elles permettent de comparer en direct plusieurs niveaux de compression et de trouver le meilleur compromis entre qualité et poids.
Compresser avec un outil dédié
De nombreux outils gratuits suppriment les données inutiles (métadonnées, profils colorimétriques) sans impact visible. Parmi les plus utilisés : Squoosh (qui exporte en WebP et AVIF avec une prévisualisation avant/après), TinyPNG (qui gère désormais aussi WebP et AVIF), ou encore des plugins d’optimisation intégrés aux CMS. Le principe reste le même : comparer le rendu avant et après pour placer le curseur au bon endroit.
Notre méthode. Les chiffres de compression WebP cités ici proviennent de la documentation officielle de Google (developers.google.com/speed/webp), consultée le 07/07/2026. Les captures des outils Squoosh et TinyPNG ont été réalisées le même jour ; nous avons vérifié à cette date que TinyPNG prend bien en charge WebP et AVIF. Nous n’avons pas mesuré nous-mêmes de gains chiffrés sur un site précis : les repères donnés sont des ordres de grandeur publics.
Limiter le travail du navigateur au chargement
Alléger les fichiers ne suffit pas : il faut aussi éviter de tout charger d’un coup et servir la bonne image au bon appareil. Trois techniques natives, aujourd’hui standard, y suffisent.
Le chargement différé (lazy loading)
L’attribut loading="lazy", pris en charge nativement par les navigateurs, indique de ne charger une image qu’à l’approche du regard. Les visuels situés sous la ligne de flottaison ne pèsent alors plus sur le premier affichage. À réserver aux images hors écran : l’image principale en haut de page, elle, doit rester chargée en priorité.
Les images responsives (srcset et sizes)
Avec les attributs srcset et sizes, vous fournissez plusieurs résolutions d’une même image et laissez le navigateur choisir la plus adaptée à l’écran et à la densité de pixels. Un smartphone ne télécharge alors pas la version pensée pour un grand écran, ce qui économise beaucoup de données sur mobile.
Le format picture et les CDN d’images
La balise <picture> permet de proposer plusieurs formats (AVIF, puis WebP, puis JPEG) et de laisser le navigateur retenir le premier qu’il sait afficher. Enfin, un CDN d’images (service de diffusion et de transformation à la volée) automatise souvent l’essentiel : conversion de format, redimensionnement, compression et distribution géographique, sans intervention manuelle image par image.
Les anciennes techniques d’économie de requêtes, comme les sprites CSS ou l’encodage des images en Data URIs, ont largement cédé la place aux polices d’icônes et surtout aux SVG, plus souples et plus performants pour tout ce qui relève des icônes et des éléments d’interface.
Pour aller plus loin :
Pour améliorer votre site vitrine, ces articles complètent bien celui-ci :
Questions fréquentes
Quel format d’image faut-il privilégier en 2026 ?
Pour la grande majorité des cas, servez du WebP par défaut : il est universellement pris en charge et pèse en général 25 à 34 % de moins qu’un JPEG à qualité équivalente. Quand vous le pouvez, ajoutez une version AVIF en priorité, avec un repli automatique sur WebP puis JPEG via la balise picture. Le PNG reste pertinent pour la transparence et les aplats, et le SVG pour les logos et icônes vectoriels. Le JPEG garde son intérêt en repli universel pour les photos.
Le lazy loading suffit-il à accélérer une page ?
Non, c’est un levier parmi d’autres. Le chargement différé évite de télécharger d’emblée les images hors écran, ce qui allège le premier affichage, mais il ne réduit pas le poids des fichiers eux-mêmes. Pour un vrai gain, il faut d’abord servir un format moderne, redimensionner chaque image à sa taille d’affichage et la compresser. Le lazy loading intervient ensuite, en complément, pour hiérarchiser ce qui se charge en premier.
Faut-il un logiciel payant pour compresser ses images ?
Pas nécessairement. Des outils gratuits comme Squoosh ou TinyPNG couvrent la plupart des besoins et exportent vers les formats modernes. Les CMS proposent aussi des plugins d’optimisation qui traitent automatiquement les images à l’import. Un logiciel de retouche payant apporte surtout un confort d’export et de comparaison, mais n’est pas indispensable pour obtenir des images légères et de bonne qualité.
