Optimiser les images web : WebP, AVIF et srcset en 2026
Formats modernes, compression et responsive pour un LCP sous 2,5 s sur mobile. Ce guide regroupe les bonnes pratiques que nous appliquons chez GothamDev pour nos clients en France et à l'international — sans jargon inutile.
1. WebP et AVIF : quand les utiliser
WebP réduit le poids de 25 à 35 % par rapport au JPEG à qualité visuelle équivalente. AVIF va encore plus loin sur les photos et les dégradés.
Servez AVIF/WebP avec fallback JPEG via la balise picture ou un CDN qui négocie le format (Accept header).
Un site lent ou mal structuré pénalise directement votre positionnement Google : nous visons un score Lighthouse mobile supérieur à 90 sur nos livraisons vitrine, landing et refonte.
2. Dimensions et srcset
Ne jamais servir une image 3000 px pour un bloc de 800 px. Générez 400, 800, 1200 et 1600 px selon vos breakpoints.
Attributs width et height explicites pour éviter le CLS — le navigateur réserve l'espace avant le chargement.
Le maillage interne compte autant que les mots-clés : reliez services, études de cas, articles de blog et pages villes pour concentrer l'autorité SEO vers vos pages qui convertissent.
3. Lazy-load et priorité hero
loading="lazy" sous la ligne de flottaison uniquement. L'image hero : fetchpriority="high" et preload si c'est le LCP.
Évitez les carrousels lourds en above-the-fold — une image statique optimisée convertit souvent mieux.
GothamDev accompagne des artisans, PME et créateurs en Gard, Drôme, Ardèche, Vaucluse et à l'international — un seul interlocuteur du cadrage à la mise en ligne, avec 821 avis vérifiés sur LeGeekShop (4,87★).
4. Synthèse : plan d'action 30 jours
Appliquez ce guide par étapes — pas tout en même temps. Mesurez une métrique par semaine (trafic organique, appels, ventes, FPS serveur…) pour savoir ce qui fonctionne.
GothamDev peut prendre en charge tout ou partie de ce plan : audit initial gratuit, devis transparent et livrables testés avant mise en production.
- Semaine 1 : audit URLs, objectifs, benchmark concurrents locaux
- Semaine 2 : arborescence, wireframes, rédaction des textes clés
- Semaine 3 : développement, intégrations, tests mobile
- Semaine 4 : SEO technique, Search Console, mise en ligne + suivi 30 jours
Questions fréquentes
Pour qui est ce guide ?
PME, fondateurs et équipes web qui veulent des résultats mesurables.
GothamDev peut m'aider ?
Oui — audit et accompagnement sur gothamdev.fr/contact.html.
Ce guide s'adresse-t-il aux TPE et artisans ?
Oui. La majorité de nos clients sont des structures locales ou en remote qui veulent un site crédible et des demandes de contact qualifiées.
Passer à l'action
Vous voulez aller plus loin sur « Optimiser les images web » ? Parlons-en.