Le format d'image que vous utilisez sur votre site web peut faire la différence entre un score Lighthouse de 60 et un de 95. Ce guide vous mène de l'audit initial jusqu'à avoir toutes les images optimisées et servies dans le bon format selon le navigateur du visiteur.
Vous n'avez pas besoin de connaissances avancées. Vous avez besoin de 20 Oui 30 minutes.
Paso 1 — Auditez l'état actuel
Avant de changer quoi que ce soit, vous devez savoir avec quoi vous travaillez.
Ouvrez PageSpeed Insights (pagespeed.web.dev) et analysez votre site web. Cherchez spécifiquement:
- “Servir les images dans des formats nouvelle génération”: cela vous liste les images encore en JPG/PNG et combien de poids vous pourriez économiser
- “Tailler correctement les images”: images servies plus grandes que la taille affichée
- “Différer les images hors écran”: images qui devraient avoir un lazy loading
Notez le poids total des images et le potentiel d'économie indiqué par l'outil. C'est ton point de départ.
Paso 2 — Télécharge toutes les images du projet
Travaille sur les originaux, jamais sur les images déjà compressées. Si tu as accès au dépôt ou au CMS, télécharge les images dans leur version de qualité maximale.
Si les originaux ont été perdus et que tu n'as que les fichiers publiés, travaille avec ce que tu as — mais considère cela comme un problème technique à documenter pour l'avenir.
Paso 3 — Convertis et optimise en lot
C'est le cœur du processus. Vous avez deux options:
Option A — Outil en ligne sans installation: Utilise Pixelaso, qui traite tout dans ton navigateur sans rien envoyer à des serveurs externes. Fais glisser toutes les images en même temps, sélectionne WebP comme format de destination, régle la qualité au 82% (point optimal entre qualité visuelle et poids), activate the resizing option if any image exceeds the displayed dimensions, and download the ZIP with everything processed.
Option B — Command line with Sharp (Node.js):
npm install sharp-cli -g
# Convertir un directorio entero de JPGs a WebP
sharp -i ./images/*.jpg -o ./images/webp/ --format webp --quality 82
# Generar también versión AVIF
sharp -i ./images/*.jpg -o ./images/avif/ --format avif --quality 65The advantage of the command line is automation in large projects or CI/CD pipelines. For small projects or freelancers, the online tool is faster.
Paso 4 — Implement srcset to serve the correct format
Not all browsers support AVIF. You can't just replace all your JPGs with AVIFs. The correct solution is to serve the most modern format that each visitor's browser supports using the element <picture>:
<picture>
<!-- AVIF para navegadores modernos que lo soportan -->
<source srcset="imagen.avif" type="image/avif">
<!-- WebP como fallback para Chrome/Firefox/Edge/Safari modernos -->
<source srcset="imagen.webp" type="image/webp">
<!-- JPG como fallback universal -->
<img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600" loading="lazy">
</picture>The browser automatically selects the first one it supports. A modern Chrome loads AVIF. An old Safari loads JPG. Cada uno recibe el archivo más ligero posible para sus capacidades.
Important: incluye siempre width Oui height dans le <img> para evitar Cumulative Layout Shift (CLS), que penaliza el Lighthouse score.
Paso 5 — Añade lazy loading en imágenes fuera del viewport inicial
Cualquier imagen que no sea visible sin hacer scroll debe cargarse de forma diferida:
<img src="imagen.jpg" loading="lazy" alt="..." width="800" height="600">Un atributo. Sin JavaScript. Sin librerías. Soportado en todos los navegadores modernos. Las imágenes por encima del fold (las primeras que ve el usuario) NO deben tener lazy loading — añade loading="eager" o simplemente omite el atributo.
Paso 6 — Verifica el resultado
Vuelve a PageSpeed Insights y analiza la web de nuevo. Compara los scores antes y después. Los cambios típicos tras este proceso:
- Performance score: sube 15–40 puntos en webs con imágenes no optimizadas
- Largest Contentful Paint (LCP): réduction de 1 à 3 secondes
- Poids total de la page: réduction de 40 à 70 %
Si le score n’améliore pas autant que prévu, vérifiez si les images de fond en CSS sont également optimisées — ce processus ne couvre que les images en HTML.
Résumé du processus
| Paso | action | La météo |
|---|---|---|
| 1 | Auditer avec PageSpeed Insights | 5 min |
| 2 | Télécharger les images originales | 5 min |
| 3 | Convertir en WebP/AVIF par lot | 5–10 min |
| 4 | Mettre en œuvre <picture> avec srcset |
10–15 min |
| 5 | Ajouter le lazy loading | 2 min |
| 6 | Vérifier le résultat | 3 min |
conclusion
L’optimisation des images est un des investissements en temps avec le meilleur retour en développement web. Trente minutes de travail peuvent entraîner des améliorations significatives en vitesse, SEO et expérience utilisateur qui se maintiennent pendant des années.
Le processus décrit est applicable à tout type de site web — WordPress, Astro, Next.js, HTML statique — et ne nécessite aucun changement dans le backend ni dans l'architecture du projet.
