Bilder & Medien

Bilder und Medien machen Webseiten lebendig. Ob Fotos, Illustrationen, Videos oder Audio — in diesem Kapitel lernst du, wie du alle Arten von Medien in deine Webseite einbindest und dabei auf Performance und Barrierefreiheit achtest.

Bilder einbinden: <img>

Das <img>-Tag ist ein selbstschliessendes Tag und benoetigt mindestens zwei Attribute:

<img src="bild.jpg" alt="Beschreibung des Bildes">

• src — der Pfad zum Bild (lokal oder URL)
• alt — ein Alternativtext, der das Bild beschreibt

Warum ist alt so wichtig?

Der Alternativtext wird angezeigt, wenn:

• Das Bild nicht geladen werden kann
• Ein Screenreader die Seite vorliest
• Eine Suchmaschine das Bild indexiert

<!-- Gut: Beschreibend -->
<img src="sonnenuntergang.jpg"
     alt="Leuchtend oranger Sonnenuntergang ueber dem Meer">

<!-- Schlecht: Nichtssagend -->
<img src="sonnenuntergang.jpg" alt="Bild">
<img src="sonnenuntergang.jpg" alt="">  <!-- Nur bei dekorativen Bildern! -->

<!-- Dekoratives Bild (alt leer lassen) -->
<img src="trenner-linie.png" alt="">

Breite und Hoehe angeben

Gib immer width und height an — das verhindert Layout-Verschiebungen beim Laden:

<img src="foto.jpg"
     alt="Stadtansicht von Berlin"
     width="800"
     height="600">

/* Mit CSS die Groesse flexibel halten */
img {
    max-width: 100%;
    height: auto;
}

Bildformate im Ueberblick

Format	Vorteile	Nachteile	Ideal fuer
JPEG	Kleine Dateien, gute Fotoqualitaet	Kein Transparenz-Support	Fotos
PNG	Transparenz, verlustfrei	Groessere Dateien	Logos, Icons, Screenshots
WebP	Klein, Transparenz, gute Qualitaet	Aeltere Browser	Fotos und Grafiken (modern)
AVIF	Noch kleiner als WebP	Noch nicht ueberall unterstuetzt	Zukunftssicheres Format
SVG	Vektorgrafik, skalierbar, winzig	Nicht fuer Fotos	Icons, Logos, Illustrationen
GIF	Animationen	Max 256 Farben	Einfache Animationen

Responsive Bilder mit srcset

Verschiedene Geraete brauchen verschiedene Bildgroessen. Mit srcset lieferst du dem Browser mehrere Optionen:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Responsives Bild">

• srcset — Liste von Bildern mit ihrer tatsaechlichen Breite (w)
• sizes — wie breit das Bild bei verschiedenen Viewport-Groessen dargestellt wird

Der Browser waehlt automatisch das beste Bild fuer das jeweilige Geraet.

Das <picture>-Element

Fuer noch mehr Kontrolle ueber Bildquellen:

<picture>
    <!-- AVIF fuer moderne Browser -->
    <source srcset="bild.avif" type="image/avif">
    <!-- WebP als Fallback -->
    <source srcset="bild.webp" type="image/webp">
    <!-- JPEG als letzter Fallback -->
    <img src="bild.jpg" alt="Beschreibung des Bildes">
</picture>

Art Direction mit <picture>

Zeige unterschiedliche Bilder je nach Bildschirmgroesse:

<picture>
    <!-- Auf kleinen Bildschirmen: Hochformat-Ausschnitt -->
    <source media="(max-width: 600px)"
            srcset="foto-portrait.jpg">
    <!-- Auf grossen Bildschirmen: Querformat -->
    <source media="(min-width: 601px)"
            srcset="foto-landscape.jpg">
    <img src="foto-landscape.jpg"
         alt="Panorama der Alpen">
</picture>

Lazy Loading

Bilder, die nicht sofort sichtbar sind, erst laden wenn sie in den Viewport scrollen:

<!-- Bilder am Anfang der Seite: normal laden -->
<img src="hero.jpg" alt="Hero-Bild" loading="eager">

<!-- Bilder weiter unten: lazy laden -->
<img src="galerie-1.jpg" alt="Foto 1" loading="lazy">
<img src="galerie-2.jpg" alt="Foto 2" loading="lazy">
<img src="galerie-3.jpg" alt="Foto 3" loading="lazy">

Das loading="lazy" Attribut wird von allen modernen Browsern unterstuetzt und verbessert die Ladezeit deiner Seite erheblich.

Figure und Figcaption

Fuer Bilder mit Bildunterschriften:

<figure>
    <img src="diagramm.png"
         alt="Balkendiagramm: Webentwickler-Gehaelter 2026">
    <figcaption>
        Durchschnittliche Gehaelter von Webentwicklern
        in Deutschland, 2026. Quelle: Stepstone.
    </figcaption>
</figure>

Das ist semantisch korrekt und hilft Screenreadern, die Zusammengehoerigkeit von Bild und Text zu verstehen.

Video einbinden

Eigenes Video

<video controls width="800" height="450">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Dein Browser unterstuetzt kein HTML5-Video.
       <a href="video.mp4">Video herunterladen</a>.</p>
</video>

Video-Attribute

<video controls
       autoplay
       muted
       loop
       poster="vorschaubild.jpg"
       width="800"
       height="450">
    <source src="video.mp4" type="video/mp4">
</video>

Attribut	Bedeutung
controls	Zeigt Play/Pause-Buttons
autoplay	Startet automatisch (nur mit muted!)
muted	Stumm geschaltet
loop	Endlosschleife
poster	Vorschaubild vor dem Abspielen
preload	none, metadata oder auto

YouTube-Video einbetten

<iframe width="560"
        height="315"
        src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Videobeschreibung"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        loading="lazy">
</iframe>

Tipp: Verwende youtube-nocookie.com statt youtube.com fuer besseren Datenschutz.

Audio einbinden

<audio controls>
    <source src="musik.mp3" type="audio/mpeg">
    <source src="musik.ogg" type="audio/ogg">
    <p>Dein Browser unterstuetzt kein HTML5-Audio.</p>
</audio>

SVG einbinden

SVGs (Scalable Vector Graphics) sind perfekt fuer Icons und Logos:

<!-- Als img-Tag -->
<img src="icon.svg" alt="Einstellungen-Icon" width="24" height="24">

<!-- Inline SVG (volle Kontrolle mit CSS) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10" stroke="currentColor"
            stroke-width="2"/>
</svg>

Inline-SVGs lassen sich mit CSS direkt stylen — Farbe, Groesse, Animationen.

Bilder optimieren — Best Practices

1. Richtige Groesse: Bilder nicht groesser als noetig hochladen
2. Modernes Format: WebP oder AVIF bevorzugen
3. Komprimierung: Tools wie Squoosh oder TinyPNG nutzen
4. Lazy Loading: Fuer Bilder ausserhalb des Viewports
5. width und height: Immer angeben fuer Layout-Stabilitaet
6. Alt-Texte: Beschreibend und praezise

Uebungen

Uebung 1: Bildergalerie

Erstelle eine einfache Bildergalerie mit:

• Mindestens 4 Bildern (nutze Platzhalterbilder von picsum.photos)
• <figure> und <figcaption> fuer jedes Bild
• loading="lazy" fuer die Bilder

<!-- Platzhalterbilder -->
<img src="https://picsum.photos/400/300?random=1" alt="Zufallsbild 1">

Uebung 2: Responsive Hero-Bild

Erstelle ein Hero-Bild mit <picture>, das:

• Auf Mobilgeraeten ein Hochformat-Bild zeigt
• Auf Desktops ein Querformat-Bild zeigt
• WebP mit JPEG-Fallback unterstuetzt

Uebung 3: Video-Seite

Binde ein YouTube-Video (oder eigenes Video) ein mit:

• Korrektem <iframe> oder <video> Tag
• Lazy Loading
• Einem Titel fuer Barrierefreiheit

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Listen und Tabellen:

• Verschachtelte Listen
• Daten in Tabellen darstellen
• Tabellen barrierefrei gestalten

Zusammenfassung

• <img> braucht immer src und alt — width und height dazu fuer Stabilitaet
• WebP und AVIF sind die modernsten Bildformate mit bester Komprimierung
• srcset und <picture> liefern responsive Bilder fuer verschiedene Geraete
• loading="lazy" verbessert die Performance durch verzoegertes Laden
• <figure> mit <figcaption> ist die semantisch korrekte Art fuer Bildunterschriften
• <video> und <audio> betten Medien nativ ein — ohne externe Player

---