HTMLImageElement : propriété src

Valeur

Lorsque vous fournissez une seule image, plutôt qu'un ensemble d'images parmi lesquelles le navigateur sélectionne la meilleure correspondance pour la taille de la zone d'affichage (viewport en anglais) et la densité de pixels de l'écran, l'attribut src est une chaîne de caractères qui indique l'URL de l'image souhaitée. Cela peut être défini soit dans le HTML lui-même via l'attribut de contenu src, soit par programmation en définissant la propriété src de l'élément.

Si vous utilisez l'attribut de contenu srcset pour fournir plusieurs options d'image selon la densité de pixels de l'écran, l'URL spécifiée par l'attribut src est utilisée de deux façons :

• comme solution de repli pour les navigateurs qui ne prennent pas en charge srcset ;
• comme équivalent à la définition d'une image dans srcset avec le multiplicateur de taille 1x : l'image définie par src est utilisée sur les écrans à faible densité (par exemple, les écrans 72 DPI ou 96 DPI classiques).

De plus, si vous utilisez src avec à la fois sizes (ou l'attribut de contenu sizes) et srcset pour choisir une image selon la taille de la zone d'affichage, l'attribut src n'est utilisé que comme solution de repli pour les navigateurs qui ne prennent pas en charge sizes et srcset ; sinon, il n'est pas utilisé.

Exemples

Définir une seule image

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

Résultat

Utiliser src avec un ensemble d'images

Lorsque vous utilisez un ensemble d'images avec la propriété srcset, src sert soit de solution de repli pour les anciens navigateurs, soit de taille 1x de l'image.

HTML

Résultat

Définir une solution de repli pour la sélection basée sur la zone d'affichage

Lorsque vous utilisez la sélection d'une image depuis un srcset en fonction de la zone d'affichage, en spécifiant aussi la propriété sizes, la propriété src sert de solution de repli pour les navigateurs qui ne prennent pas en charge la sélection basée sur la zone d'affichage. Les navigateurs qui la prennent en charge ignorent src dans ce cas.

HTML

Résultat

Spécifications

Compatibilité des navigateurs