Quel format d'image recommander pour le web en 2024 ?

WebP est le format recommandé pour les photos et images en tons continus. Il est 25–35% plus léger que JPEG à qualité égale et supporté par tous les navigateurs modernes. Pour les logos et images avec transparence, WebP ou PNG. Pour les icônes, SVG est préférable car vectoriel.

Quelle est la différence entre loading='lazy' et fetchpriority='high' ?

loading='lazy' retarde le chargement d'une image jusqu'à ce qu'elle approche du viewport — utile pour les images sous la ligne de flottaison. fetchpriority='high' indique au navigateur de prioriser le chargement d'une image critique — à utiliser uniquement sur l'image hero ou LCP candidate, pour améliorer le score LCP.

Optimiser une image pour un site web

Q: Pourquoi définir width et height sur les images HTML ?

Sans width et height, le navigateur ne peut pas calculer l'espace à réserver avant le chargement de l'image. Cela provoque des décalages de mise en page (layout shift) qui dégradent le CLS (Cumulative Layout Shift), un Core Web Vital. Définir ces attributs élimine ces décalages.

Mis à jour : avril 2026

Une image mal optimisée peut à elle seule faire passer votre LCP de vert à rouge dans Google Search Console. Format, poids, attributs HTML, ordre de chargement — voici les paramètres qui comptent vraiment pour les Core Web Vitals et le SEO.

Accédez directement à l'outil principal pour appliquer ce réglage.

Ouvrir le compresseur d'images →

Format recommandé selon le type d'image

Type d'image	Format recommandé	Pourquoi
Photo, dégradé, image naturelle	WebP	25–35% plus léger que JPEG à qualité égale
Logo, icône avec transparence	WebP ou PNG	WebP plus léger, PNG plus compatible
Icône simple, pictogramme	SVG	Vectoriel, taille nulle ou quasi-nulle, scalable
Animation	WebP animé ou vidéo MP4	MP4 jusqu'à 10× plus léger qu'un GIF animé
Capture d'écran avec texte	PNG ou WebP	PNG pour les contours nets, WebP si poids prioritaire

Poids cible selon le contexte

Contexte	Poids cible
Image hero (LCP candidate)	< 150–200 Ko
Image dans un article, photo de contenu	< 80–100 Ko
Vignette, miniature de liste	< 20–40 Ko
Logo dans le header	< 10 Ko (SVG ou WebP)
Image de fond CSS	< 50 Ko

Rappel : ces poids sont indicatifs. Ce qui compte pour le LCP, c'est le temps de chargement de l'image — influencé par le poids mais aussi par la connexion du visiteur, le CDN, le cache HTTP et la priorisation navigateur.

Les attributs HTML indispensables

Le HTML de vos images est aussi important que leur poids. Quatre attributs critiques :

<!-- Image hero — priorité haute, pas de lazy -->

<img

  src="hero.webp"

  alt="Description précise de l'image"

  width="1200" height="600"

  fetchpriority="high"

>

<!-- Images sous la ligne de flottaison -->

<img

  src="article-photo.webp"

  alt="Description de la photo"

  width="800" height="533"

  loading="lazy"

>

width + height — Évitent le CLS (décalage de mise en page). Le navigateur réserve l'espace avant que l'image soit chargée.
fetchpriority="high" — À placer uniquement sur l'image hero ou LCP candidate. Indique au navigateur de la télécharger en premier.
loading="lazy" — Retarde le chargement des images sous le fold. N'appliquez jamais cet attribut sur l'image hero.
alt — Indispensable pour l'accessibilité et indexé par Google Images.

Images responsives avec srcset

Pour servir la bonne résolution selon l'écran du visiteur, utilisez srcset :

<img

  src="photo-800.webp"

  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"

  sizes="(max-width: 600px) 100vw, 800px"

  alt="Description"

  width="800" height="533"

  loading="lazy"

>

Le navigateur choisit automatiquement la version appropriée. Un visiteur sur mobile 375 px reçoit photo-400.webp. Un visiteur sur desktop 1440 px reçoit photo-800.webp. Cela réduit fortement le poids moyen téléchargé.

Questions fréquentes

Quel format recommander pour le web en 2024 ?

WebP pour les photos — 25–35% plus léger que JPEG, supporté par tous les navigateurs modernes. SVG pour les icônes et logos simples. PNG comme fallback si la compatibilité logicielle prime.

Différence entre loading="lazy" et fetchpriority="high" ?

lazy retarde le chargement des images hors du viewport. fetchpriority="high" priorise le chargement de l'image hero pour améliorer le LCP. Ces deux attributs ne s'utilisent pas ensemble — l'un est pour les images non critiques, l'autre pour l'image la plus importante.

Pourquoi définir width et height sur les images ?

Sans ces attributs, le navigateur ne peut pas calculer l'espace à réserver. Cela provoque des décalages de mise en page (layout shift) qui dégradent le CLS, un Core Web Vital pris en compte par Google.

Une image trop lourde peut-elle impacter mon référencement ?

Indirectement oui. Une image hero lourde dégrade le LCP, qui est un Core Web Vital utilisé par Google comme signal de classement. Un LCP > 4s est considéré comme mauvais et peut pénaliser les positions dans les résultats de recherche.