HTML Academy · Lektion

Das picture-Element für Art Direction

Tauschen Sie ganze Bilder abhängig von den Bedingungen des Viewports aus.

Lektion 3 von 414 Schritte

Das picture-Element für Art Direction ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Problem der Art Direction

Art Direction bedeutet, abhängig von der Bildschirmgröße einen grundlegend anderen Bildausschnitt oder eine andere Komposition bereitzustellen:

Vollständiges Landschaftsfoto auf dem Desktop
Herangezoomter Porträtausschnitt auf Mobilgeräten
Dies lässt sich nicht allein mit srcset + sizes lösen

Das picture-Element

Das <picture>-Element umschließt mehrere <source>-Elemente und ein <img>-Fallback:

<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 -->

Funktionsweise von picture

Der Browser wertet die <source>-Elemente der Reihe nach von oben nach unten aus:

Die media-Bedingung der ersten Quelle prüfen – wenn sie zutrifft, dieses Bild verwenden
Die zweite Quelle prüfen – wenn sie zutrifft, diese verwenden
Auf <img> als Standard zurückfallen

Das <img>-Element zeigt weiterhin das ausgewählte Bild an und enthält den alt-Text.

Formatwechsel mit picture

Mit <picture> können Sie auch Bildformate abhängig von der Browserunterstützung auswählen:

<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 und Format kombinieren

Sie können Medienbedingungen und Formatauswahl kombinieren:

<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>

Das img-Element ist erforderlich

Das <img>-Element innerhalb von <picture> ist nicht optional:

Es zeigt das ausgewählte Bild an
Es enthält den alt-Text für die Barrierefreiheit
Es enthält width, height, loading und weitere Attribute
Ohne dieses Element wird nichts angezeigt

Das media-Attribut von source

Das media-Attribut akzeptiert standardmäßige CSS-Medienabfragen:

<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) -->

source-srcset mit responsiver Auswahl

Kombinieren Sie Art Direction mit srcset für vollständige Kontrolle:

<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>

Bilder für den Dark Mode

Stellen Sie für Nutzerinnen und Nutzer des Dark Mode unterschiedliche Bilder bereit:

<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 oder CSS background-image

Wann sollten Sie <picture> und wann CSS-Hintergründe verwenden:

Inhaltsbilder – verwenden Sie <picture>: Sie benötigen Alternativtext und sind Teil des Dokumentinhalts
Dekorative Bilder – verwenden Sie CSS-background-image mit Medienabfragen
SEO-relevante Bilder – verwenden Sie immer <picture>: Crawler indexieren img-Elemente

Hinweis zur Barrierefreiheit

Das alt-Attribut gehört immer auf <img>, nicht auf <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 -->

Lazy Loading mit picture

Fügen Sie dem <img>-Element innerhalb von <picture> Lazy Loading hinzu:

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

Schnelltest

Welches Element in einem picture-Block muss immer vorhanden sein und enthält das alt-Attribut?

Beantworte es in der interaktiven Lektion

Zusammenfassung: picture-Element

Art Direction mit picture:

<picture> umschließt <source>-Elemente und ein <img>-Element
Der Browser wählt die erste passende <source>
Verwenden Sie media für Bedingungen des Ansichtsfensters und type für die Formatauswahl
<img> ist erforderlich – es zeigt das Bild an und enthält den Alternativtext
Kombinieren Sie dies mit srcset + sizes für vollständige responsive Kontrolle

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Das picture-Element für Art Direction“ kostenlos?

Ja — der vollständige Text von „Das picture-Element für Art Direction“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das picture-Element für Art Direction“?

Tauschen Sie ganze Bilder abhängig von den Bedingungen des Viewports aus. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das picture-Element für Art Direction“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Das img-Element: src, alt, width und height
Responsive Bilder mit srcset und sizes
Das picture-Element für Art Direction
figure und figcaption

← Zurück zu HTML Academy