Les images représentent en moyenne 50 à 70 % du poids total d'une page web. Sur un site e-commerce avec des photos produit en JPEG non compressé, ce chiffre peut monter à 85 %. Résultat : des pages lentes, un mauvais score Core Web Vitals, et des visiteurs qui quittent avant d'avoir vu votre offre. L'optimisation des images est l'un des leviers de performance les plus impactants — et souvent le plus négligé.
Ce guide vous donne les bases techniques pour choisir le bon format, implémenter le lazy loading et rédiger des attributs alt efficaces pour le SEO.
Le JPEG reste pertinent pour les photographies complexes avec de nombreuses couleurs et transitions graduelles. Sa compression avec perte le rend très compact pour ce type de contenu. Mais ses limites sont connues : pas de transparence, artefacts visibles à faible qualité, et une taille souvent sous-optimale comparée aux nouveaux formats.
À utiliser quand : vous devez garantir une compatibilité maximale avec des navigateurs très anciens, ou traiter des flux d'images legacy impossibles à convertir.
Le PNG est en compression sans perte, ce qui le rend lourd pour les photographies. Son usage légitime : les logos avec fond transparent, les captures d'écran, les graphiques avec du texte précis, les images avec aplats de couleurs nettes.
À éviter : les photos. Un JPEG de la même photo sera 5 à 10 fois plus petit.
Développé par Google, WebP combine le meilleur du JPEG (compression efficace pour photos) et du PNG (support de la transparence, compression sans perte option). En pratique :
À utiliser pour : pratiquement toutes vos images web. C'est le format de référence pour 2026.
AVIF (AV1 Image File Format) est encore plus efficace que WebP :
Compatibilité navigateur en 2026 : environ 93 % des navigateurs supportent AVIF. Avec une balise <picture> qui propose AVIF en priorité et WebP en fallback, vous couvrez 99 %+ des navigateurs.
Limitation : l'encodage AVIF est plus lent que WebP. Pour un site avec des milliers d'images, la conversion initiale peut prendre du temps.
<picture>
<!-- AVIF en priorité pour les navigateurs compatibles -->
<source srcset="/images/photo-produit.avif" type="image/avif">
<!-- WebP en fallback -->
<source srcset="/images/photo-produit.webp" type="image/webp">
<!-- JPEG comme fallback ultime -->
<img src="/images/photo-produit.jpg"
alt="Fauteuil en cuir naturel marron, vue de face"
width="800"
height="600"
loading="lazy">
</picture>
Cette approche garantit que chaque navigateur reçoit le format le plus efficace qu'il peut afficher.
<Image> intégré avec conversion automatique et optimisation à la constructionPour les sites que nous développons, notre système de gestion intègre la conversion d'images automatique.
Le lazy loading retarde le chargement des images hors du viewport (la partie visible de l'écran) jusqu'à ce que l'utilisateur s'en approche en scrollant.
<!-- Image dans le viewport : PAS de lazy loading -->
<img src="hero.webp" alt="..." width="1200" height="600" fetchpriority="high">
<!-- Image hors viewport : lazy loading activé -->
<img src="produit.webp" alt="..." width="400" height="400" loading="lazy">
L'attribut loading="lazy" est supporté par 97 %+ des navigateurs. C'est la méthode recommandée — simple, sans JavaScript.
Attention : ne mettez JAMAIS loading="lazy" sur votre image principale (hero, banner, LCP candidate). Cela retarderait l'image que Google mesure pour le LCP, dégradant votre score Core Web Vitals. Notre guide Core Web Vitals explique comment identifier votre élément LCP.
Pour les galeries dynamiques ou les images chargées par JavaScript, utilisez l'Intersection Observer API :
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
L'attribut alt d'une image remplit deux rôles : décrire l'image aux utilisateurs malvoyants (lecteurs d'écran) et indiquer à Google le contenu de l'image. En l'absence d'alt text, Google ne peut pas indexer l'image correctement.
Images informatives (produits, illustrations, infographies) :
<!-- Mauvais -->
<img alt="photo">
<img alt="image produit 1">
<!-- Bon -->
<img alt="Bureau en chêne massif 160x80 cm, finition huilée naturelle">
<img alt="Pose de carrelage cuisine par l'équipe Dupont Carrelage, Tours">
Images décoratives (séparateurs, fonds, icônes purement esthétiques) :
<!-- Alt vide = image décorative, les lecteurs d'écran l'ignorent -->
<img alt="" src="separateur-decoratif.webp">
Images de liens (logos cliquables, boutons images) :
<!-- L'alt décrit la destination du lien, pas l'image -->
<a href="/services/menuiserie"><img alt="Voir nos services de menuiserie" src="icone-menuiserie.webp"></a>
Un CDN (Content Delivery Network) image stocke vos images sur des serveurs répartis géographiquement et les sert depuis le nœud le plus proche de l'utilisateur. Pour un site à audience française, la latence gagnée est de 30 à 150 ms selon la localisation de l'utilisateur.
CDN images populaires :
Pour un site vitrine local avec peu d'images, un CDN généraliste (Cloudflare Free) suffit souvent. Pour un site e-commerce avec des centaines de photos produit, un CDN spécialisé en images est un investissement rentable.
Le nom de votre fichier image est un signal SEO mineur mais cohérent. Préférez :
bureau-chene-massif-160x80-huile-naturelle.webp
À :
IMG_20240312_142856.jpg
DSC_0047_final_v2_ok.png
image1.jpg
Utilisez des tirets entre les mots (pas d'espaces, pas d'underscores), restez descriptif et incluez naturellement des mots-clés pertinents.
Oui, indirectement et de manière significative. Le format d'image influence la vitesse de chargement (poids du fichier), qui elle-même impacte le LCP (Core Web Vitals) et le score de performance mobile. Ces métriques sont des facteurs de classement Google. Une image en JPEG non optimisé de 3 Mo fera monter votre LCP à 5+ secondes sur mobile. La même image en AVIF pèsera peut-être 400 Ko et permettra un LCP < 2 secondes.
Le lazy loading (chargement différé) est une technique qui retarde le téléchargement des images situées hors du viewport jusqu'à ce que l'utilisateur scrolle jusqu'à elles. Sans lazy loading, le navigateur télécharge toutes les images de la page au chargement initial — même celles qui sont à 3 écrans de profondeur et que l'utilisateur ne verra peut-être jamais. Avec lazy loading, seules les images visibles sont chargées immédiatement, réduisant considérablement le poids initial de la page.
Un bon alt text décrit précisément ce que montre l'image, inclut naturellement des mots-clés pertinents, et fait entre 80 et 125 caractères. Il évite de commencer par "Image de..." ou "Photo de..." (redondant — Google sait que c'est une image) et n'utilise pas de keyword stuffing. Pensez à décrire l'image pour quelqu'un qui ne peut pas la voir : que perdrait-il si l'image n'était pas là ?
En 2026, AVIF est compatible avec Chrome, Edge, Firefox et Safari (iOS 16+, macOS Ventura+). La compatibilité globale est d'environ 93 %. Pour les 7 % restants (principalement vieux Safari et IE), utilisez la balise <picture> avec WebP en fallback et JPEG en fallback ultime. Cette approche garantit la meilleure image possible pour chaque utilisateur sans sacrifier la compatibilité.
L'optimisation des images est un travail ponctuel à fort retour sur investissement. Une après-midi passée à convertir vos images et à ajouter le lazy loading peut réduire le poids de votre page de 60 % et faire passer votre LCP de "mauvais" à "bon" dans Google Search Console.
Premier RDV gratuit, devis sous 24h, sans engagement.
Prendre rendez-vous →