Optimisation des images pour la vitesse d'un site web : guide complet
·3 min read·Philo
Performance webLes images représentent près de la moitié du poids moyen d'une page web. Les optimiser est le levier de performance le plus impactant à votre disposition.
Pourquoi c'est important
- 53 % des utilisateurs mobiles quittent un site si le chargement dépasse 3 secondes (Google)
- 1 seconde de délai = 7 % de conversions en moins (Akamai)
- Les Core Web Vitals (LCP, CLS, INP) influencent directement le classement Google
Étape 1 : Choisir le bon format
| Format | Type | Idéal pour |
|---|---|---|
| JPEG | Avec perte | Photos |
| PNG | Sans perte | Captures d'écran, transparence |
| WebP | Les deux | Toutes les images web (25–35 % plus léger que JPEG) |
| AVIF | Les deux | Nouvelle génération (à utiliser avec fallback) |
| SVG | Vectoriel | Icônes, logos |
Étape 2 : Compresser
| Type d'image | Qualité | Réduction |
|---|---|---|
| Image hero / bannière | 80–85 % | 40–60 % |
| Images de blog | 70–80 % | 50–70 % |
| Vignettes | 60–70 % | 60–80 % |
| Photos produits | 75–85 % | 40–60 % |
Utilisez TinyImg — dans le navigateur, privé, instantané.
Étape 3 : Images responsives
<img
src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Texte alternatif descriptif"
width="800"
height="600"
/>
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Texte alternatif descriptif" width="800" height="600" />
</picture>
Étape 4 : Lazy loading
<img src="image.webp" alt="Description" loading="lazy" width="800" height="600" />
N'appliquez jamais le lazy loading aux images situées au-dessus de la ligne de flottaison. Précisez toujours les attributs width et height pour éviter le CLS.
Étape 5 : Dimensions des images
<!-- Correct -->
<img src="photo.webp" alt="Photo" width="800" height="600" />
img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
Étape 6 : CDN
- Cloudflare (offre gratuite)
- Cloudinary
- imgix
- Vercel (Next.js)
Étape 7 : Mesurer les performances
| Métrique | Objectif |
|---|---|
| LCP | Moins de 2,5 s |
| CLS | Moins de 0,1 |
| Poids des images | Moins de 500 Ko |
Outils : PageSpeed Insights, Lighthouse, WebPageTest.
Checklist
- Bon format (WebP/PNG/SVG)
- Compression avec TinyImg
- srcset + sizes
- Lazy load sous la ligne de flottaison
- width + height sur toutes les images
- CDN
- Audit PageSpeed
Conclusion
Commencez par compresser avec TinyImg. Vos utilisateurs et Google vous en remercieront.
performance weboptimisationvitesseSEO