Meilleurs formats d'image pour les performances web en 2026 | Bulk Image Compressor

Published March 17, 2026

Les images sont votre plus grand problème de performance

Sur la plupart des sites web, les images représentent 40 à 60% du poids total de la page. Si votre page se charge lentement, les images en sont probablement la principale raison. Une seule image hero non optimisée peut être plus lourde que tout votre HTML, CSS et JavaScript réunis.

C’est important pour les utilisateurs (personne n’attend 5 secondes pour qu’une page se charge) et pour le classement dans les moteurs de recherche. Les Core Web Vitals de Google mesurent directement la rapidité d’affichage de votre contenu, et les images sont presque toujours le goulot d’étranglement.

Core Web Vitals et images

Trois métriques composent les Core Web Vitals, et les images les affectent toutes :

Largest Contentful Paint (LCP) mesure le temps nécessaire au chargement du plus grand élément visible. Sur la plupart des pages, c’est une image. Google considère que moins de 2,5 secondes est « bon ». Une image hero de 3 Mo sur une connexion lente dépassera largement ce seuil.

Cumulative Layout Shift (CLS) mesure les sauts de page pendant le chargement. Les images sans dimensions explicites de largeur et hauteur provoquent des décalages de mise en page car le navigateur ne sait pas combien d’espace réserver avant le téléchargement de l’image.

Interaction to Next Paint (INP) mesure la réactivité. Les grandes images qui bloquent le thread principal pendant le décodage peuvent nuire à ce score, surtout sur les appareils mobiles.

La solution pour les trois commence par utiliser le bon format et le bon niveau de compression.

Comparaison des formats pour 2026

JPEG

Fonctionne toujours. Toujours supporté partout. Mais pour les performances web spécifiquement, il existe de meilleures options maintenant. Les fichiers JPEG sont typiquement 25 à 35% plus gros que le WebP à qualité égale, et ils ne supportent pas la transparence.

Utilisez JPEG quand vous avez besoin de compatibilité en dehors du web : pièces jointes d’emails, documents, téléchargements sur les réseaux sociaux qui n’acceptent pas le WebP.

PNG

Même constat. Le PNG est parfait pour les captures d’écran, logos et graphiques, mais les tailles de fichier sont plus grandes que les alternatives modernes. Pour les images web sans perte, le WebP sans perte produit des fichiers plus petits.

Utilisez PNG quand vous devez partager des fichiers qui seront ouverts dans des éditeurs d’images, ou quand vous avez besoin d’une compatibilité garantie dans des contextes non-navigateur.

WebP

WebP est devenu le format d’image web par défaut en 2026. La prise en charge par les navigateurs est universelle : Chrome, Firefox, Safari et Edge. Les CDN et services d’images servent le WebP automatiquement. La plupart des CMS gèrent le WebP nativement maintenant.

Les chiffres parlent d’eux-mêmes : 25 à 35% plus petit que le JPEG pour les photos, 25% plus petit que le PNG pour les graphiques, avec la même qualité visuelle. Il supporte la compression avec perte, sans perte, la transparence et l’animation.

Si vous ne devez choisir qu’un seul format pour votre site web, WebP est le choix évident aujourd’hui. Pour une comparaison plus approfondie avec JPEG et PNG, consultez notre comparatif JPEG vs PNG vs WebP.

AVIF : l’étape suivante

AVIF est basé sur le codec vidéo AV1 et pousse l’efficacité de compression encore plus loin. Les fichiers AVIF sont typiquement 20 à 30% plus petits que le WebP, ce qui les rend environ 50% plus petits que le JPEG.

La prise en charge par les navigateurs s’est considérablement améliorée. Chrome, Firefox et Safari supportent tous AVIF maintenant. Edge le supporte aussi. Le principal inconvénient est la vitesse d’encodage : créer des fichiers AVIF prend beaucoup plus de temps que le WebP ou le JPEG. Pour un site avec des milliers d’images, le temps d’encodage s’accumule.

AVIF vaut la peine d’être utilisé si votre processus de build peut gérer le temps d’encodage. Pour la plupart des sites, servir AVIF avec un fallback WebP est la configuration idéale.

Images responsives avec srcset

Choisir le bon format n’est que la moitié de l’équation. Vous devez aussi servir la bonne taille.

Un visiteur sur un téléphone avec un écran de 390px de large n’a pas besoin d’une image de 1920px. L’attribut srcset vous permet de fournir plusieurs tailles et de laisser le navigateur choisir la meilleure :

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Photo produit"
  width="1200"
  height="800"
  loading="lazy"
>

Ceci indique au navigateur : sur les petits écrans, utilisez la version 400px. Sur les écrans moyens, utilisez 800px. Sur les grands écrans, utilisez 1200px. Les économies de bande passante sur mobile sont significatives.

Notez aussi l’attribut loading="lazy". Il indique au navigateur de ne charger l’image que lorsqu’elle apparaît à l’écran. N’utilisez pas le chargement paresseux sur votre image LCP (la première grande image que l’utilisateur voit), mais utilisez-le sur tout ce qui est sous la ligne de flottaison.

Recommandations de format par type de contenu

Images hero et bannières : AVIF avec fallback WebP. Ce sont vos plus grandes images et elles bénéficient le plus d’une meilleure compression. Servez à 1920px de large maximum, avec des variantes srcset plus petites pour le mobile.

Photos de produits : WebP avec perte à qualité 80. Pour le e-commerce, vous pouvez servir des centaines d’images produit par page de catégorie. Même une réduction de 10% par image s’accumule rapidement.

Images d’articles de blog : WebP avec perte à qualité 75-82. Les images de blog sont généralement affichées à 800-1200px de large, donc elles n’ont pas besoin d’être énormes. Redimensionnez-les avant de les compresser.

Icônes et logos : SVG quand c’est possible. Pour les logos matriciels, WebP sans perte ou PNG. Ces fichiers sont petits de toute façon, donc le choix du format importe moins ici.

Captures d’écran et diagrammes : WebP sans perte ou PNG. Les deux préservent parfaitement le texte et les bords nets. WebP vous donne environ 25% de fichiers plus petits.

Contenu téléchargé par les utilisateurs : Traitez tout en WebP au moment du téléchargement. Utilisez Bulk Image Compressor pour convertir par lots si vous migrez des bibliothèques d’images existantes.

Gains rapides pour la vitesse de page

Si vous voulez améliorer la performance des images de votre site aujourd’hui, voici les changements les plus impactants :

Passez au WebP pour toutes les images web. Cela seul peut réduire la charge des images de 25 à 35%.
Redimensionnez les images aux dimensions auxquelles elles sont réellement affichées. Ne servez pas une photo de 4000px dans un conteneur de 600px.
Ajoutez des attributs width et height à chaque balise img. Cela empêche les décalages de mise en page.
Chargez paresseusement les images sous la ligne de flottaison. Seules vos premières images visibles doivent se charger immédiatement.
Préchargez votre image LCP si c’est une hero statique. Utilisez <link rel="preload" as="image" href="hero.webp"> dans l’en-tête de votre document.
Utilisez un CDN qui sert les images depuis des emplacements proches de vos visiteurs.

Et le futur ?

JPEG XL était un autre format prometteur, mais son adoption par les navigateurs a stagné. Chrome a supprimé son support expérimental, et sans Chrome, une adoption généralisée est peu probable. AVIF est le choix le plus pratique pour l’avenir.

La tendance est claire : les formats plus récents compressent mieux, et la prise en charge par les navigateurs rattrape son retard avec le temps. WebP est la valeur sûre par défaut aujourd’hui. AVIF vaut la peine d’être adopté si vos outils le supportent. Dans les deux cas, le choix du format combiné à un dimensionnement approprié et au chargement paresseux empêchera vos images d’être un goulot d’étranglement pour les performances.

Pour en savoir plus sur le fonctionnement technique de la compression d’images, notre guide sur pourquoi les images de sites web ont besoin de compression couvre les fondamentaux.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor