HTML Academy · Les

Het picture-element voor art direction

Wissel volledige afbeeldingen op basis van viewportvoorwaarden.

Les 3 van 414 stappen

Het picture-element voor art direction is een gratis HTML Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.

Probleem met art direction

Art direction betekent dat je afhankelijk van de schermgrootte een fundamenteel andere uitsnede of compositie van een afbeelding aanbiedt:

Een volledige landschapsfoto op desktop
Een ingezoomde portretuitsnede op mobiel
Dit kan niet alleen met srcset + sizes worden opgelost

Het element picture

Het element <picture> bevat meerdere elementen <source> en een terugvaloptie met <img>:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Hoe picture werkt

De browser evalueert de elementen <source> in volgorde, van boven naar beneden:

Controleer de voorwaarde van het eerste source-element via media — als die overeenkomt, gebruik je die afbeelding
Controleer het tweede source-element — als dat overeenkomt, gebruik je die afbeelding
Val terug op <img> als standaardoptie

Het element <img> geeft de gekozen afbeelding nog steeds weer en bevat de alt-tekst.

Van formaat wisselen met picture

Met <picture> kun je ook afbeeldingsformaten selecteren op basis van browserondersteuning:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Art direction en formaat combineren

Je kunt media-voorwaarden en formaatselectie combineren:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

Het element img is vereist

Het element <img> binnen <picture> is niet optioneel:

Het geeft de geselecteerde afbeelding weer
Het bevat de alt-tekst voor toegankelijkheid
Het bevat width, height, loading en andere attributen
Zonder dit element wordt niets weergegeven

Het media-attribuut van source

Het attribuut media accepteert standaardmediaquery's van CSS:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

srcset van source met responsieve selectie

Combineer art direction met srcset voor volledige controle:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Afbeeldingen voor de donkere modus

Bied verschillende afbeeldingen aan voor gebruikers van de donkere modus:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture versus CSS background-image

Wanneer gebruik je <picture> en wanneer CSS-achtergronden:

Inhoudsafbeeldingen — gebruik <picture>: ze hebben alt-tekst nodig en maken deel uit van de documentinhoud
Decoratieve afbeeldingen — gebruik CSS background-image met mediaqueries
Afbeeldingen die belangrijk zijn voor SEO — gebruik altijd <picture>: crawlers indexeren img-elementen

Opmerking over toegankelijkheid

Het attribuut alt hoort altijd op <img> te staan, niet op <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Lui laden met picture

Voeg lui laden toe aan de <img> binnen <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Korte controle

Welk element in een picture-blok moet altijd aanwezig zijn en bevat het alt-attribuut?

Beantwoord dit in de interactieve les

Samenvatting: het element picture

Art direction met picture:

<picture> bevat elementen <source> en een <img>
De browser kiest het eerste overeenkomende <source>
Gebruik media voor viewportvoorwaarden en type voor formaatselectie
<img> is vereist — het geeft de afbeelding weer en bevat de alt-tekst
Combineer dit met srcset + sizes voor volledige responsieve controle

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Het picture-element voor art direction” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Het picture-element voor art direction”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.

Wat leer ik in “Het picture-element voor art direction”?

Wissel volledige afbeeldingen op basis van viewportvoorwaarden. Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met HTML Academy te beginnen?

Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Het picture-element voor art direction”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over HTML Academy?

Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Het img-element: src, alt, width en height
Responsieve afbeeldingen met srcset en sizes
Het picture-element voor art direction
figure en figcaption

← Terug naar HTML Academy