Performance

Images pour le web : ce qu'il faut vraiment savoir

Un guide pratique pour optimiser vos images sans vous perdre dans les détails techniques.

Équipe Webful
5 min de lecture
24 lectures
Mis à jour le 16/11/2025
Performances images optimisation Webp

Un guide pratique pour optimiser vos images sans vous perdre dans les détails techniques.

1. Trois idées fausses à oublier

❌ Les DPI c'est important pour le web

FAUX : Les DPI (dots per inch) concernent l'impression, pas l'affichage écran. Une image à 300 DPI n'est pas plus nette qu'une image à 72 DPI sur un site web. Ce qui compte : le nombre de pixels (largeur × hauteur).

❌ Une grande image est meilleure

FAUX : Afficher une image de 4000 pixels sur un écran de smartphone de 360 pixels, c'est du gaspillage. Résultat : site plus lent, visiteurs perdus.

❌ JPEG pour les photos, PNG pour les graphismes

Cette règle était vraie avant 2015. Aujourd'hui, les formats modernes comme WebP font mieux dans la plupart des cas, avec des fichiers 5 à 10 fois plus légers.

2. Les formats d'images : comparatif

✅ WebP — Le format moderne à privilégier

  • Très léger (5 à 10 fois moins lourd que JPEG ou PNG)
  • Qualité élevée
  • Gère la transparence
  • Compatible avec tous les navigateurs récents (Chrome, Firefox, Safari, Edge)

Utilisation : photos, illustrations, logos, bannières, pictogrammes, portfolios.

PNG — Pour la transparence si WebP impossible

  • Format sans perte de qualité
  • Gère parfaitement la transparence
  • 2 à 5 fois plus lourd que WebP

Utilisation : logos et pictogrammes avec fond transparent, uniquement si votre outil ne gère pas le WebP.

JPEG — Standard classique

  • Bonne qualité pour les photos
  • Compression avec perte
  • Plus lourd que WebP

Utilisation : si votre CMS ou éditeur ne supporte pas WebP, ou pour gérer des photos anciennes déjà en JPEG.

SVG — Format vectoriel pour les dessins

  • Taille très réduite
  • Qualité parfaite quelle que soit la taille d'affichage
  • Impossible à utiliser pour les photos

Utilisation : icônes, logos simples, illustrations vectorielles.

3. Quelle taille utiliser ?

Le web ne lit pas en DPI mais en pixels. Voici les largeurs suffisantes dans la majorité des cas :

Usage Largeur recommandée
Affichage mobile plein écran 600 px
Image dans un article 1200 px
Grande bannière / slider 1600–1920 px
Logo 400–800 px
Icône 64–512 px

⚡ Règle simple : ne dépassez jamais 1920 px de largeur pour le web.

Au-delà, le fichier est inutilement lourd et ralentit le chargement sans améliorer le rendu.

4. Transparence : quels formats ?

✅ WebP et PNG gèrent la transparence

  • Fond transparent
  • Opacités partielles
  • Dégradés avec transparence

Préférez WebP : résultat identique, fichier plus léger.

❌ JPEG ne gère pas la transparence

Les zones transparentes deviennent blanches ou noires selon l'export.

5. Compression : avec ou sans perte ?

Compression avec perte (JPEG, WebP qualité 70-85 %)

  • Réduit fortement la taille du fichier
  • Perte de qualité invisible dans 90 % des cas

Recommandé pour : photos, bannières, visuels non techniques

Compression sans perte (PNG, WebP lossless)

  • Image strictement identique pixel par pixel
  • Fichier très lourd

Recommandé pour : logos, pictogrammes, schémas techniques

Pour les photos destinées au web, la compression avec perte est suffisante et bien plus efficace.

6. Lazy loading : pourquoi c'est indispensable

Le lazy loading charge les images uniquement quand elles deviennent visibles à l'écran.

<img src="image.webp" loading="lazy" alt="Description de l'image">

Avantages :

  • Pages qui chargent plus vite
  • Économie de données sur mobile
  • Meilleur score SEO
  • Meilleur confort utilisateur

Google recommande cette pratique pour tous les sites.

7. Pourquoi ces détails ont un impact

⚡ Vitesse = visiteurs qui restent

Une page qui charge en 1 seconde retient les visiteurs. À 4 secondes, vous en perdez 3 sur 4.

  

📈 Vitesse = meilleur référencement

Google privilégie les sites rapides, particulièrement sur mobile.

🎨 Format adapté = rendu plus propre

WebP affiche des contours nets, des dégradés fluides, avec des fichiers légers.

  

🔋 Chargement différé = économie d'énergie

Important en mobilité, améliore les performances et l'autonomie.

8. Tableaux récapitulatifs

Quel format choisir ?

Besoin Format recommandé Alternative
Photo WebP (avec perte) JPEG
Graphisme sans transparence WebP JPEG
Logo / pictogramme WebP ou SVG PNG
Image avec transparence WebP PNG
Illustration vectorielle SVG —

Quelle taille choisir ?

Type d'image Largeur max Raison
Mobile 600 px Lisible et léger
Article standard 1200 px Équilibre qualité/poids
Bannière large 1600–1920 px Affichage desktop
Logo 400–800 px Net et rapide
Icône 64–512 px Charge instantanément

Bonnes pratiques essentielles

  • Privilégier WebP dans tous les cas possibles
  • Ne jamais dépasser 1920 px de largeur
  • Toujours activer loading="lazy"
  • Toujours ajouter un attribut alt descriptif (SEO et accessibilité)
  • Ne jamais mettre une image en pleine résolution sortie d'un smartphone
  • Utiliser srcset pour charger différentes tailles selon l'écran
  • Tester d'abord l'affichage sur smartphone

En résumé

Les images mal optimisées ralentissent votre site et font fuir vos visiteurs. Trois actions simples ont un impact immédiat :

  1. Convertir vos images en WebP
  2. Réduire la taille à 1200-1600 px maximum
  3. Activer le lazy loading

Le reste viendra progressivement.

Webful analyse la vitesse de chargement de vos pages et identifie les images qui ralentissent votre site.

Partager cette fiche

Twitter LinkedIn