Comment les URL du srcset sont-elles nommées ?

Chaque largeur ajoute un suffixe - w avant l'extension du fichier, par ex. photo-640w.jpg.

À quoi sert l'attribut sizes ?

Il indique au navigateur l'espace occupé par l'image afin qu'il puisse choisir la bonne source.

Générateur de srcset

Construisez une balise img responsive avec srcset et sizes.

URL de l'image de baseLargeurs (px)Attribut sizesTexte alternatif

Sortie

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Saisissez une URL d'image de base et des largeurs cibles pour générer une balise <img> responsive avec les attributs srcset et sizes.

Comment utiliser

Saisissez l'URL de l'image de base.
Listez les largeurs souhaitées, séparées par des virgules.
Copiez la balise img responsive générée.

Questions fréquentes

Comment les URL du srcset sont-elles nommées ?: Chaque largeur ajoute un suffixe -<largeur>w avant l'extension du fichier, par ex. photo-640w.jpg.
À quoi sert l'attribut sizes ?: Il indique au navigateur l'espace occupé par l'image afin qu'il puisse choisir la bonne source.

Outils associés

Générateur de balises meta
Aperçu Open Graph
Générateur de balise meta viewport