srcset HTML attribuut

Een of meer door komma's gescheiden strings, die mogelijke afbeeldingsbronnen aangeven die de user agent kan gebruiken.

Elke string bestaat uit:

1. Een URL naar een afbeelding
2. Optioneel, witruimte gevolgd door een van de volgende:
   • Een breedtedescriptor (een positief geheel getal direct gevolgd door w). Deze moet overeenkomen met de intrinsieke breedte van de gerefereerde afbeelding. De breedtedescriptor wordt gedeeld door het bronformaat dat is opgegeven in het sizes-attribuut om de effectieve pixeldichtheid te berekenen. Gebruik bijvoorbeeld de breedtedescriptor 450w om een afbeeldingsbron op te geven die gebruikt moet worden wanneer de renderer een 450 pixel brede afbeelding nodig heeft. Wanneer een srcset "w"-descriptoren bevat, gebruikt de browser die descriptoren samen met het sizes-attribuut om een bron te kiezen.
   • Een pixeldichtheidsdescriptor (een positief drijvendekommagetal direct gevolgd door x). Deze specificeert de voorwaarde waaronder de bijbehorende afbeeldingsbron gebruikt moet worden als de pixeldichtheid van het scherm. Gebruik bijvoorbeeld de pixeldichtheidsdescriptor 2x of 2.0x om een afbeeldingsbron op te geven die gebruikt moet worden wanneer de pixeldichtheid dubbel de standaarddichtheid is.

Als er geen descriptor is opgegeven, krijgt de bron de standaarddescriptor 1x. Het is onjuist om breedtedescriptoren en pixeldichtheidsdescriptoren te mengen in hetzelfde srcset-attribuut. Dubbele descriptoren (bijvoorbeeld twee bronnen in dezelfde srcset die beide met 2x zijn beschreven) zijn ook ongeldig.

Spatietekens, anders dan de witruimte die de URL van de bijbehorende conditiedescriptor scheidt, worden genegeerd; dit geldt zowel voor voorloop- als volgspaties, als voor spaties vóór of na elke komma. Als een afbeeldingskandidaat-string echter geen descriptoren en geen witruimte na de URL bevat, moet de volgende afbeeldingskandidaat-string, indien aanwezig, beginnen met een of meer witruimtetekens, anders wordt de komma als onderdeel van de URL beschouwd.

Wanneer de srcset van het <img>-element x-descriptoren gebruikt, beschouwen browsers ook de URL in het src-attribuut (indien aanwezig) als een kandidaat, en kennen deze de standaarddescriptor 1x toe. Als het srcset-attribuut daarentegen breedtedescriptoren gebruikt, wordt src niet meegenomen en wordt in plaats daarvan het sizes-attribuut gebruikt.

De user agent kiest naar eigen goeddunken een van de beschikbare bronnen. Dit geeft hen aanzienlijke vrijheid om hun selectie af te stemmen op zaken zoals gebruikersvoorkeuren of bandbreedte-omstandigheden. Zie onze tutorial Responsieve afbeeldingen voor een voorbeeld.

Specificeert een door komma's gescheiden lijst van een of meer afbeeldings-URL's en hun descriptoren. Verplicht als de ouder van <source> <picture> is. Niet toegestaan als de ouder <audio> of <video> is.

De lijst bestaat uit tekenreeksen gescheiden door komma's, die een reeks mogelijke afbeeldingen aangeven die de browser kan gebruiken. Elke tekenreeks bestaat uit:

• Een URL die een afbeeldingslocatie specificeert.
• Een optionele breedtedescriptor — een positief geheel getal direct gevolgd door "w", zoals 300w.
• Een optionele pixeldichtheidsdescriptor — een positief zwevendekommagetal direct gevolgd door "x", zoals 2x.

Elke tekenreeks in de lijst moet ofwel een breedtedescriptor ofwel een pixeldichtheidsdescriptor hebben om geldig te zijn. Deze twee descriptoren mogen niet samen gebruikt worden; er mag slechts één consistent door de hele lijst heen gebruikt worden. De waarde van elke descriptor in de lijst moet uniek zijn. De browser kiest de meest geschikte afbeelding om op een bepaald moment weer te geven, op basis van deze descriptoren. Als de descriptoren niet zijn opgegeven, wordt de standaardwaarde 1x gebruikt. Als het sizes-attribuut ook aanwezig is, moet elke tekenreeks een breedtedescriptor bevatten. Als de browser srcset niet ondersteunt, wordt src gebruikt als de standaardafbeeldingsbron.