HTML Academy · Lektion

Responsive Bilder mit srcset und sizes

Liefern Sie für unterschiedliche Bildschirmdichten passend große Bilder aus.

Responsive Bilder mit srcset und sizes ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Das Problem mit Einzelbildern

Ein einzelnes großes Bild, das an alle Geräte ausgeliefert wird, verschwendet auf kleinen Bildschirmen Bandbreite:

Ein Smartphone mit einem 390-Pixel-Bildschirm benötigt kein 2400-Pixel-Bild
Ein 4K-Monitor verdient ein Bild mit höherer Auflösung als 96 dpi
Responsive Bilder liefern das richtige Bild für den richtigen Bildschirm

Das srcset-Attribut

srcset stellt eine Liste von Bildquellen mit ihren Breiten bereit:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Deskriptoren für Pixeldichten

Verwenden Sie die Deskriptoren 1x, 2x und 3x für Bilder mit fester Größe und unterschiedlichen Auflösungen:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Das sizes-Attribut

sizes teilt dem Browser mit, wie breit das Bild bei unterschiedlichen Viewport-Größen angezeigt wird:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Wie der Browser ein Bild auswählt

Der Browser berechnet: sizes-Wert × Geräte-Pixelverhältnis, um aus srcset auszuwählen:

600-Pixel-Viewport, 2× DPR, size=100vw → benötigt ein 1200-Pixel-Bild → wählt 1600w
1200-Pixel-Viewport, 1× DPR, size=50vw → benötigt ein 600-Pixel-Bild → wählt 800w
Nach dem Laden speichert der Browser das Bild im Cache und lädt es möglicherweise nicht erneut

Standardwert von sizes

Ohne sizes nimmt der Browser an, dass das Bild die gesamte Viewport-Breite einnimmt (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

srcset: Deskriptoren für Breiten gegenüber x-Deskriptoren

Zwei Modi von srcset:

Breiten-Deskriptoren (w) – mit sizes: fluide, layoutabhängige Auswahl
Deskriptoren für Pixeldichten (x) – Bilder mit fester Größe in mehreren Auflösungen

Verwenden Sie für die meisten responsiven Bilder w-Deskriptoren. Verwenden Sie x für Symbole, Logos und Elemente mit fester Größe.

srcset-Dateien erzeugen

Werkzeuge zum Erzeugen responsiver Bildvarianten:

Sharp (Node.js) – programmgesteuerte Größenänderung von Bildern
Squoosh – browserbasiert, mit visuellem Vergleich
Cloudinary / Imgix – bedarfsgesteuerte Größenänderung über URLs
Webpack / Vite-Plugins – Generierung zur Build-Zeit

srcset mit WebP und Fallback

Kombinieren Sie srcset mit <picture> für ein Fallback-Format:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Art Direction gegenüber Auflösungsumschaltung

Zwei Arten von Problemen bei responsiven Bildern:

Auflösungsumschaltung – dasselbe Bild mit unterschiedlichen Auflösungen → verwenden Sie srcset + sizes
Art Direction – unterschiedlicher Ausschnitt oder Bildaufbau auf verschiedenen Bildschirmen → verwenden Sie <picture> mit <source media>

Responsive Bilder testen

So überprüfen Sie, ob Ihr srcset funktioniert:

Öffnen Sie die DevTools → Registerkarte Network → filtern Sie nach Images
Stellen Sie die Gerätesimulation auf verschiedene Viewport-Größen und DPRs ein
Laden Sie die Seite neu – prüfen Sie, welche Datei der Browser anfordert
Prüfen Sie außerdem: Lighthouse → Performance → Prüfung „Properly sized images“

Browserunterstützung für srcset

Die Browserunterstützung für srcset ist ausgezeichnet:

Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge)
Der src-Fallback unterstützt ältere Browser
Für den produktiven Einsatz ist kein Polyfill erforderlich

Kurze Überprüfung

Was teilt das sizes-Attribut dem Browser mit?

Zusammenfassung: srcset und sizes

Das Wichtigste zu responsiven Bildern:

srcset – Liste von Bilddateien mit ihren intrinsischen Breiten oder Pixeldichten
sizes – Medienbedingungen, die beschreiben, wie breit das Bild angezeigt wird
Der Browser wählt die beste Übereinstimmung: sizes-Wert × Geräte-DPR
Breiten-Deskriptoren (w) für fluide Bilder; x für Elemente mit fester Größe
Geben Sie immer src als Fallback an

Häufig gestellte Fragen

Ist die Lektion „Responsive Bilder mit srcset und sizes“ kostenlos?

Ja — der vollständige Text von „Responsive Bilder mit srcset und sizes“ 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 „Responsive Bilder mit srcset und sizes“?

Liefern Sie für unterschiedliche Bildschirmdichten passend große Bilder 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 2 von 4.

Wie lange dauert die Lektion „Responsive Bilder mit srcset und sizes“?

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