Responsive Bilder & Medien
Ein Bild für alle Bildschirme ist entweder zu groß oder zu klein. srcset, sizes und picture liefern die passende Variante.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
srcset und sizes
srcset listet mehrere Bilddateien mit ihrer Breite (w) oder Pixeldichte (x) auf.
Der Browser wählt die passende Variante.
sizes beschreibt, wie breit das Bild im Layout erscheint. Erst beide Angaben zusammen ermöglichen eine gute Entscheidung.
<img src="foto-800.jpg"
srcset="foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Schreibtisch mit Laptop und Notizbuch"
width="800" height="533">picture für Formatswechsel
picture enthält mehrere source-Varianten und ein img als Fallback.
Der Browser nimmt die erste passende Quelle.
type wählt das Dateiformat, media den Bildausschnitt für bestimmte Breiten. Das img-Element bleibt in jedem Fall nötig.
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Team bei der Planung"
width="800" height="533">
</picture>Laden und Layout stabil halten
loading="lazy" verschiebt das Laden von Bildern außerhalb des sichtbaren Bereichs.
Das wichtigste Bild oben auf der Seite sollte nicht verzögert werden.
width und height oder ein festes Seitenverhältnis reservieren Platz und verhindern, dass Inhalte beim Laden springen. Für das größte Bild kann fetchpriority="high" helfen.
<img src="hero.jpg" alt="Startseite des Kurses"
width="1200" height="600" fetchpriority="high">
<img src="detail.jpg" alt="Ausschnitt der Lektion"
width="800" height="600" loading="lazy">Vertiefung
Der Browser wählt, du beschreibst
Mit srcset und sizes beschreibst du dem Browser, welche Bildvarianten existieren und wie breit das Bild im Layout wird. Die Auswahl übernimmt er anhand von Viewport, Pixeldichte und Netzwerk.
picture wechselt das Format oder den Bildausschnitt, nicht nur die Auflösung. width und height reservieren Platz und verhindern Layoutsprünge; loading="lazy" gehört unter den sichtbaren Bereich, nicht auf das wichtigste Bild.
<img src="kurs-800.jpg"
srcset="kurs-400.jpg 400w, kurs-800.jpg 800w, kurs-1600.jpg 1600w"
sizes="(max-width: 700px) 100vw, 50vw"
alt="Lernende arbeiten an einem Laptop"
width="800" height="533"
loading="lazy">Merksatz: Beschreibe Bildvarianten und Layoutbreite, statt feste Größen zu erzwingen. Formate, Lazy Loading und feste Maße machen Bilder schnell und stabil.
Übungsaufgabe
Bildergalerie für alle Bildschirme
Baue eine Bildergalerie mit einem responsiven Hauptbild und zwei kleineren Bildern. Nutze srcset, ein modernes Format mit Fallback und Lazy Loading.
Das soll dein Programm können
- Ein img mit srcset und sizes
- Ein picture mit AVIF oder WebP und JPG-Fallback
- width und height an jedem Bild
- loading="lazy" für Bilder außerhalb des sichtbaren Bereichs
- Sinnvolle alt-Texte
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Das Hauptbild bekommt fetchpriority="high" und kein Lazy Loading. Die kleineren Bilder stehen weiter unten und können loading="lazy" nutzen.
Lösung anzeigen
<section aria-labelledby="galerie">
<h2 id="galerie">Bildergalerie</h2>
<img src="hero-1200.jpg"
srcset="hero-600.jpg 600w, hero-1200.jpg 1200w"
sizes="100vw"
alt="Weite Ansicht des Lernraums"
width="1200" height="600"
fetchpriority="high">
<picture>
<source srcset="detail.avif" type="image/avif">
<source srcset="detail.webp" type="image/webp">
<img src="detail.jpg" alt="Nahaufnahme eines Notizbuchs"
width="800" height="600" loading="lazy">
</picture>
</section>Warum funktioniert das?
srcset und sizes überlassen die Auswahl dem Browser. picture liefert moderne Formate mit JPG-Fallback. Feste Maße reservieren Platz, Lazy Loading verschiebt nur die Bilder, die noch nicht gebraucht werden.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.