Het element <picture>

Attributen

Dit element bevat alleen globale attributen.

Gebruiksnotities

Je kunt de object-position-eigenschap gebruiken om de positionering van de afbeelding binnen het frame van het element aan te passen, en de object-fit-eigenschap om te bepalen hoe de afbeelding wordt aangepast om binnen het frame te passen.

Voorbeelden

Deze voorbeelden laten zien hoe verschillende attributen van het <source>-element de selectie van de afbeelding binnen <picture> beïnvloeden.

Het media-attribuut

Het media-attribuut specificeert een mediaconditie (vergelijkbaar met een media query) die de user agent voor elk <source>-element evalueert.

Als de mediaconditie van de <source> false oplevert, slaat de browser deze over en evalueert het volgende element binnen <picture>.

<picture>
  <source srcset="voorbeeld.png" media="(width >= 600px)" />
  <img src="voorbeeld.png" alt="Voorbeeldlogo" />
</picture>

Je kunt afbeeldingsassets voor lichte en donkere thema's verwisselen met behulp van de mediafeature @media/prefers-color-scheme:

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="logo-light.png" media="(prefers-color-scheme: light)" />
  <img src="logo-light.png" alt="Product logo" />
</picture>

Het srcset-attribuut

Het attribuut srcset wordt gebruikt om een lijst met mogelijke afbeeldingen aan te bieden op basis van grootte of de pixeldichtheid van het scherm.

Het bestaat uit een door komma's gescheiden lijst van afbeeldingsdescriptors. Elke afbeeldingsdescriptor bestaat uit een URL van de afbeelding, en ofwel:

• een breedtedescriptor, gevolgd door een w (zoals 300w); OF
• een pixeldichtheidsdescriptor, gevolgd door een x (zoals 2x) om een afbeelding met hoge resolutie te serveren voor schermen met een hoge DPI.

Let vooral op het volgende:

• breedte- en pixeldichtheidsdescriptors mogen niet samen worden gebruikt
• een ontbrekende pixeldichtheidsdescriptor impliceert 1x
• dubbele descriptorwaarden zijn niet toegestaan (2x & 2x, 100w & 100w)

Het volgende voorbeeld illustreert het gebruik van het srcset-attribuut met het <source>-element om een afbeelding met hoge dichtheid en een afbeelding met standaardresolutie op te geven:

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="dit naslagwerk logo" height="320" width="320" />
</picture>

Het srcset-attribuut kan ook worden gebruikt op het <img>-element zonder dat het <picture>-element nodig is. Het volgende voorbeeld laat zien hoe je het srcset-attribuut gebruikt om respectievelijk een afbeelding met standaardresolutie en een afbeelding met hoge dichtheid op te geven:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="dit naslagwerk logo" />

Het sizes-attribuut

Met het sizes-attribuut van het <source>-element kun je een set mediaconditie-lengte-paren opgeven en de weergavegrootte van de afbeelding voor elke conditie aangeven. Dit helpt de browser om de meest geschikte afbeelding te selecteren uit het srcset-attribuut, dat afbeeldingen vermeldt met hun intrinsieke breedtes.

De browser evalueert de mediacondities in het sizes-attribuut voordat er afbeeldingen worden gedownload. Zie het sizes-attribuut van <img> en <source> voor meer informatie.

Bijvoorbeeld:

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="Example image" />
</picture>

In dit voorbeeld:

• Als het viewport 600px breed of smaller is, is de slotgrootte 400px; anders is deze 800px.
• De browser vermenigvuldigt de slotgrootte met de pixelverhouding van het apparaat om de ideale afbeeldingsbreedte te bepalen, en kiest vervolgens de dichtstbijzijnde beschikbare afbeelding uit srcset.

Zonder sizes gebruikt de browser de standaardgrootte van de afbeelding zoals opgegeven door de afmetingen in pixels. Dit is mogelijk niet de beste keuze voor alle apparaten, vooral als de afbeelding op verschillende schermgroottes of in verschillende contexten wordt weergegeven.

Let op dat sizes alleen effect heeft als er breedte-dimensiedescriptors bij srcset worden opgegeven in plaats van pixelverhoudingswaarden (bijvoorbeeld 200w in plaats van 2x). Zie voor meer informatie over het gebruik van srcset de documentatie over responsieve afbeeldingen.

Het type-attribuut

Het type-attribuut specificeert een MIME-type voor de bron-URL('s) in het srcset-attribuut van het <source>-element. Als de user agent het opgegeven type niet ondersteunt, wordt het <source>-element overgeslagen.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

Technische samenvatting

Zie ook

• <img>
• <source>