sizes HTML attribuut

• bronformaat (source size)

  • : Een bronformaat bestaat uit:

    1. Een media-conditie, weggelaten voor het laatste item in de lijst.
    2. Een bronformaatwaarde.

    Het volgende bronformaat stelt bijvoorbeeld voor een 1000px brede afbeeldingsbron te gebruiken als de breedte van de viewport 500px of minder is.

    CSSKopieer code

    (width <= 500px) 1000px

    Media-condities beschrijven eigenschappen van de viewport, niet van de afbeelding. Omdat een bronformaatdescriptor de breedte specificeert die tijdens de layout voor de afbeelding gebruikt moet worden, is de media-conditie doorgaans (maar niet noodzakelijk) gebaseerd op @media/width.

    Bronformaatwaarden specificeren de beoogde weergavegrootte van de afbeelding. User agents gebruiken het huidige bronformaat om een van de bronnen te selecteren die door het srcset-attribuut worden opgegeven, wanneer die bronnen beschreven zijn met breedtedescriptoren (w). De w-waarde die in sizes is gedefinieerd, bepaalt de standaard layoutbreedte van de afbeelding. Bij afwezigheid van CSS rendert de browser de afbeelding op deze grootte, ongeacht de fysieke pixelafmetingen van het gedownloade bestand.

    Een bronformaatwaarde kan elke niet-negatieve lengte zijn. Er mogen geen CSS-functies gebruikt worden anders dan de wiskundige functies. Eenheden worden op dezelfde manier geïnterpreteerd als bij media queries, wat betekent dat alle relatieve lengte-eenheden relatief zijn aan de document-root en niet aan het <img>-element. Een em-waarde is bijvoorbeeld relatief aan de root-lettergrootte, niet aan de lettergrootte van de afbeelding. Percentage-waarden zijn niet toegestaan. Als het sizes-attribuut niet is opgegeven, heeft het een standaardwaarde van 100vw (de breedte van de viewport).

• auto

  • : Het sleutelwoord auto geeft aan dat de browser de verwachte layoutbreedte van het element moet gebruiken om te bepalen welke afbeelding weergegeven wordt. Dat wil zeggen, hij moet de concrete grootte van de afbeelding gebruiken, berekend na toepassing van de layout op basis van HTML en CSS. Dit is alleen geldig in combinatie met loading="lazy", omdat verwacht wordt dat de pagina op het moment dat de afbeelding wordt geladen al beschikt over CSS en andere layoutinformatie.

    Door auto te gebruiken, hoef je je layout-media-condities niet twee keer op te geven: één keer voor de layout en één keer voor het selecteren van een geschikte afbeelding om op te halen en weer te geven.

    Als auto niet kan worden opgelost — hetzij omdat de browser het niet ondersteunt, hetzij omdat de afbeelding nog geen layoutgrootte heeft — valt de browser terug op de bronformaten in de lijst om de breedte te bepalen, vervolgens op de width/height-attributen die op het element zijn gedefinieerd, en ten slotte op de standaard intrinsieke grootte voor <img>-elementen die is gedefinieerd in het stylesheet van de user agent (300px bij 150px).

    Voor betere achterwaartse compatibiliteit met browsers die auto niet ondersteunen, kun je terugvalformaten na auto in het sizes-attribuut opnemen. Je zou ook de width- en height-attributen van het element moeten instellen op de intrinsieke afmetingen van de grootste afbeelding in je srcset, zodat de browser ruimte kan reserveren met de juiste beeldverhouding:

    HTMLKopieer code

    <img
      loading="lazy"
      width="200"
      height="200"
      sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
      srcset="
        swing-200.jpg   200w,
        swing-400.jpg   400w,
        swing-800.jpg   800w,
        swing-1600.jpg 1600w
      "
      src="swing-400.jpg"
      alt="Kettlebell Swing" />

Dit attribuut definieert de afmetingen van de iconen voor visuele media die in de bron zijn opgenomen. Het mag alleen aanwezig zijn als rel een waarde van icon bevat, of een niet-standaard type zoals Apple's apple-touch-icon. Het kan de volgende waarden hebben:

• any, wat betekent dat het icoon naar elke grootte kan worden geschaald omdat het in een vectorformaat is, zoals image/svg+xml.
• een door witruimte gescheiden lijst van afmetingen, elk in het formaat <breedte in pixels>x<hoogte in pixels> of <breedte in pixels>X<hoogte in pixels>. Elk van deze afmetingen moet in de bron aanwezig zijn.

Specificeert een lijst met bronformaten die de uiteindelijk weergegeven breedte van de afbeelding beschrijven. Toegestaan als de ouder van <source> <picture> is. Niet toegestaan als de ouder <audio> of <video> is.

De lijst bestaat uit door komma's gescheiden bronformaten. Elk bronformaat is een paar bestaande uit een mediaconditie en een lengte. Voordat de pagina opgemaakt wordt, gebruikt de browser deze informatie om te bepalen welke afbeelding, gedefinieerd in srcset, weergegeven moet worden. Merk op dat sizes alleen effect heeft als er breedtedescriptoren zijn opgegeven bij srcset, en geen pixeldichtheidsdescriptoren (dat wil zeggen, 200w moet gebruikt worden in plaats van 2x).