Optimiser les images pour le web : le guide complet

Les images représentent en moyenne 50% du poids d'une page web. Des images non optimisées ralentissent votre site, dégradent l'expérience utilisateur et pénalisent votre SEO. Voici comment les optimiser efficacement.

Pourquoi optimiser ses images ?

Impact sur les performances

Une image de 5 Mo au lieu de 200 Ko, c'est :

• 25 fois plus de données à télécharger
• Un temps de chargement considérablement rallongé
• Des Core Web Vitals dégradés (LCP notamment)

Impact sur le SEO

Google mesure la vitesse de votre site. Des images trop lourdes :

• Augmentent le temps de chargement
• Dégradent vos Core Web Vitals
• Pénalisent votre classement

Pour plus de détails, consultez mon article sur le SEO.

Impact sur les coûts

Pour les sites à fort trafic, la bande passante a un coût. Diviser le poids des images par 10, c'est diviser les coûts par 10.

Choisir le bon format d'image

JPEG : le standard photo

Idéal pour : photos, images avec beaucoup de couleurs et de dégradés.

Avantages :

• Compression efficace pour les photos
• Support universel

Inconvénients :

• Pas de transparence
• Compression avec perte

PNG : la qualité sans perte

Idéal pour : logos, icônes, images avec transparence, captures d'écran.

Avantages :

• Compression sans perte
• Supporte la transparence
• Parfait pour les aplats de couleur

Inconvénients :

• Fichiers plus lourds que JPEG pour les photos

WebP : le meilleur compromis

Idéal pour : tout type d'image sur le web moderne.

Avantages :

• 25-35% plus léger que JPEG à qualité égale
• Supporte la transparence
• Compression avec ou sans perte
• Supporté par 97% des navigateurs

Inconvénients :

• Quelques vieux navigateurs non compatibles (fallback nécessaire)

J'utilise WebP systématiquement sur mes projets.

AVIF : le futur

Idéal pour : performances maximales.

Avantages :

• 50% plus léger que JPEG
• Excellente qualité visuelle
• Supporte la transparence

Inconvénients :

• Encodage plus lent
• Support navigateur encore en progression (~92%)

SVG : le vectoriel

Idéal pour : logos, icônes, illustrations simples.

Avantages :

• Infiniment scalable sans perte
• Très léger pour les formes simples
• Animable et modifiable en CSS

Inconvénients :

• Inadapté aux photos

Les techniques de compression

Compression avec perte (lossy)

Réduit la taille en supprimant des données non essentielles à l'œil humain. Idéal pour les photos.

Outils :

• Squoosh (Google) : gratuit, en ligne
• TinyPNG : compression intelligente
• ImageOptim (Mac) : traitement par lot

Conseil : une qualité de 80-85% offre généralement le meilleur compromis.

Compression sans perte (lossless)

Réduit la taille sans perdre de données. Moins efficace mais préserve la qualité originale.

Utilisez-la pour les images où chaque détail compte (schémas techniques, captures d'écran).

Outils de compression automatique

Pour les sites WordPress :

• ShortPixel
• Imagify
• Smush

Pour les sites Next.js (comme ce portfolio) :

• Le composant Image intégré optimise automatiquement

Le dimensionnement correct

Ne jamais afficher plus grand que nécessaire

Une image de 4000px affichée à 400px gaspille 99% de ses pixels.

Règle : exportez vos images à la taille d'affichage maximale × 2 (pour les écrans Retina).

Les images responsive (srcset)

Fournissez plusieurs tailles pour que le navigateur choisisse la plus adaptée :

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Description">

Pour plus de détails sur le responsive, consultez mon guide du responsive design.

L'attribut sizes

Indiquez au navigateur la taille d'affichage avant le téléchargement :

• 100vw : pleine largeur
• 50vw : moitié de la largeur
• (max-width: 600px) 100vw, 50vw : conditionnel

Le lazy loading

Le principe

Le lazy loading diffère le chargement des images hors écran. Elles ne se chargent que lorsque l'utilisateur scrolle vers elles.

Implémentation native

L'attribut HTML natif (supporté partout) :

<img src="photo.jpg" loading="lazy" alt="Description">

Important : ne pas mettre lazy loading sur les images above-the-fold (visibles sans scroll).

Impact sur les performances

Le lazy loading améliore significativement :

• Le temps de chargement initial
• Le LCP (si bien utilisé)
• La consommation de bande passante

Les placeholders

Le problème du layout shift

Une image qui se charge provoque un saut de page (CLS) si son espace n'est pas réservé.

Solutions

Dimensions explicites

Toujours spécifier width et height :

<img src="photo.jpg" width="800" height="600" alt="Description">

Aspect ratio CSS

.image-container { aspect-ratio: 4 / 3; }

Placeholder blur

Une version très basse résolution (inline en base64) affichée pendant le chargement. C'est ce que fait automatiquement Next.js Image.

L'attribut alt : SEO et accessibilité

Importance pour l'accessibilité

Les personnes utilisant des lecteurs d'écran dépendent de l'attribut alt pour comprendre les images. C'est un pilier de l'accessibilité web.

Importance pour le SEO

Google utilise l'attribut alt pour indexer vos images et comprendre leur contexte.

Bonnes pratiques

• Descriptif : décrivez ce que montre l'image
• Concis : 125 caractères maximum
• Contextuel : adaptez au contexte de la page
• Pas de "image de..." : le navigateur sait que c'est une image

Mauvais : alt="image" Bon : alt="Équipe de développeurs travaillant dans un open space lumineux"

L'optimisation avec Next.js

Le composant Image de Next.js gère automatiquement :

• Redimensionnement à la demande
• Conversion en WebP/AVIF
• Lazy loading natif
• Placeholder blur
• Prévention du CLS

C'est l'une des raisons pour lesquelles je développe avec Next.js. Voir WordPress vs site sur mesure.

Checklist d'optimisation des images

☑️ Format adapté (WebP pour le web) ☑️ Compression appliquée (80-85% qualité) ☑️ Dimensions correctes (pas plus grand que nécessaire) ☑️ Srcset pour les images responsive ☑️ Lazy loading sur les images hors écran ☑️ Dimensions ou aspect-ratio définis ☑️ Attribut alt descriptif

Conclusion

L'optimisation des images est l'un des leviers les plus efficaces pour améliorer les performances de votre site. Quelques ajustements peuvent diviser le temps de chargement par 5 ou 10.

Vous voulez un site web performant avec des images parfaitement optimisées ? Je développe des sites où chaque détail compte. Découvrez mes réalisations.