HTML <source> srcset eigenschap

HTML <source> tag

Definitie en gebruik

srcset bepaalt deze eigenschap de URL van de afbeelding die in verschillende situaties wordt gebruikt.

Wanneer <source> wordt gebruikt <picture> is deze eigenschap vereist.

Voorbeeld

Een element <picture> dat twee bronbestanden en een alternatieve afbeelding bevat:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Try it yourself

Syntax

<source srcset="URL">

Attribute value

Value Description
URL

Specifies the URL of the image.

Possible values:

  • Absolute URL - points to another website (e.g., href="http://www.example.com/flower.jpg")
  • Relative URL - points to a file within the website (e.g., href="flower.jpg")

Browser support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0

HTML <source> tag