Comment optimiser les images de son site web pour Google sans perdre en qualité
Sur la plupart des sites web, les images représentent 60 à 80% du poids total de la page.
Une photo de 4000×3000 pixels, exportée en JPEG haute qualité, pèse facilement 5 Mo. Affichée dans un bloc de 800×600 sur votre site. C'est du gaspillage pur.
Et ce gaspillage coûte cher :
- Temps de chargement multiplié par 3
- Score PageSpeed en chute libre
- Visiteurs qui partent avant d'avoir vu quoi que ce soit
- Facture d'hébergement qui gonfle
Voici comment optimiser vos images sans sacrifier la qualité visuelle.
Les 5 règles d'or de l'optimisation d'images
1. Choisir le bon format
| Format | Quand l'utiliser | Avantage |
|---|---|---|
| WebP | Photos, images complexes | 25-35% plus léger que JPEG |
| AVIF | Photos (support croissant) | 50% plus léger que JPEG |
| JPEG | Compatibilité maximale | Universellement supporté |
| PNG | Transparence, graphiques | Sans perte, mais lourd |
| SVG | Logos, icônes, illustrations | Vectoriel, infini à toute taille |
| GIF | Animations simples | À éviter (très lourd) |
Règle : utilisez WebP par défaut. Proposez JPEG comme fallback pour les vieux navigateurs.
2. Adapter les dimensions
Ne servez jamais une image plus grande que son affichage.
| Affichage réel | Taille d'image max |
|---|---|
| Thumbnail (150×150) | 300×300 |
| Carte produit (400×400) | 800×800 |
| Hero banner (1920×600) | 1920×600 |
| Logo header (200×50) | 400×100 (retina) |
Une image affichée en 800px de large n'a pas besoin d'être en 4000px.
3. Compresser intelligemment
Compression avec perte (JPEG, WebP) :
- Qualité 80-85% : imperceptible à l'œil nu
- Qualité 60-70% : légère perte visible sur les détails
- Qualité 90-100% : gaspillage de bande passante
Notre recommandation : 80-85% pour les photos. C'est le sweet spot.
4. Implémenter le lazy loading
Le lazy loading charge les images uniquement quand elles entrent dans la zone visible de l'utilisateur.
<img src="photo.webp" loading="lazy" alt="Description" />
Impact : la page initiale charge 2-3x plus vite. Les images hors écran ne consomment rien.
5. Utiliser le srcset responsive
Servez différentes tailles d'image selon la taille de l'écran :
<img srcset="photo-400.webp 400w,
photo-800.webp 800w,
photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
src="photo-800.webp"
alt="Description" />
Un mobile reçoit une image de 400px. Un desktop reçoit une image de 1200px. Même fichier HTML.
Les outils d'optimisation
En ligne (gratuit)
| Outil | Fonction |
|---|---|
| Squoosh.app | Compression WebP/AVIF/JPEG/PNG, comparaison visuelle |
| TinyPNG | Compression JPEG/PNG simple |
| Convertio | Conversion de format |
| ImageOptim (Mac) | Compression par glisser-déposer |
Automatisé (développeurs)
Next.js Image :
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
quality={85}
/>
Next.js fait automatiquement :
- Conversion WebP
- Redimensionnement
- Compression
- Lazy loading
- srcset responsive
Sharp (Node.js) :
const sharp = require('sharp');
sharp('input.jpg')
.resize(800, 600)
.webp({ quality: 85 })
.toFile('output.webp');
L'impact SEO de l'optimisation d'images
Core Web Vitals
| Avant optimisation | Après optimisation |
|---|---|
| LCP : 4.2s | LCP : 1.1s |
| PageSpeed : 35 | PageSpeed : 94 |
Indexation
Googlebot a un "budget d'exploration". Un site lourd = moins de pages crawlées = moins de pages indexées.
Un site avec des images optimisées = plus de pages indexées = plus de visibilité.
Rankings Google Images
Google Images génère 20-25% des recherches web. Des images optimisées (alt text, nom de fichier, dimensions) rankent dans Google Images et amènent du trafic supplémentaire.
Les erreurs classiques
1. Upload des images brutes depuis l'appareil photo
Un fichier RAW de 25 Mo ou un JPEG de 8 Mo n'a rien à faire sur un site web. Redimensionnez, compressez, convertissez.
2. Pas d'alt text
❌ <img src="photo.jpg" />
✅ <img src="photo.jpg" alt="Plombier réparant un robinet à Bruxelles" />
L'alt text est crucial pour :
- L'accessibilité (lecteurs d'écran)
- Le SEO (Google comprend l'image)
- Le référencement Google Images
3. Nom de fichier générique
❌ IMG_20240520_143052.jpg
❌ image001.jpg
✅ reparation-robinet-bruxelles.jpg
✅ site-web-nextjs-promto.jpg
4. Images trop petites pour le retina
Les écrans modernes ont une densité de pixels élevée. Une image de 400px affichée en 400px sur un écran retina paraît floue.
Solution : servez des images 2x (800px pour un affichage de 400px).
5. Oublier le preloading des images critiques
L'image hero (la plus grande visible) doit être préchargée :
<link rel="preload" as="image" href="hero.webp" />
Le cas avant/après
Site d'un restaurant bruxellois :
| Métrique | Avant | Après |
|---|---|---|
| Poids images | 28 Mo | 1.2 Mo |
| Nombre images | 45 | 45 |
| Format | JPEG | WebP |
| Lazy loading | Non | Oui |
| LCP | 5.8s | 1.2s |
| PageSpeed | 22 | 91 |
Même photos, même quantité. Juste optimisées.
Notre approche chez Promto.be
Dans chaque site qu'on livre :
- ✅ Composant
<Image>Next.js (optimisation automatique) - ✅ Conversion WebP par défaut
- ✅ Lazy loading sur toutes les images non critiques
- ✅ srcset responsive
- ✅ Alt text obligatoire sur chaque image
- ✅ Noms de fichier descriptifs
- ✅ Dimensions définies (pas de CLS)
Vous n'avez rien à faire. C'est intégré.
Conclusion
L'optimisation d'images n'est pas un détail technique. C'est souvent l'action la plus impactante pour la vitesse de votre site.
Une image de 5 Mo réduite à 200 ko, c'est 25 fois moins lourd. Sur une page avec 10 images, c'est la différence entre un site qui charge en 6 secondes et un site qui charge en 0.5 seconde.
Et cette différence se traduit directement en visiteurs qui restent, en clients qui convertissent, et en positions qui montent sur Google.
Chez Promto.be, on optimise vos images sans que vous y pensiez. C'est dans la fondation.