Responsive Bilder & Medien

Bilder machen oft ueber 50% der Dateigroe sse einer Webseite aus. Wenn du sie nicht fuer verschiedene Geraete optimierst, verschwendest du Bandbreite und verlangsamst die Seite. In diesem Kapitel lernst du, wie du Bilder und Medien wirklich responsive machst.

Grundregel: Bilder nie groesser als ihr Container

img {
    max-width: 100%;
    height: auto;
    display: block;
}

Diese drei Zeilen sollten in jedem Projekt stehen. Sie stellen sicher, dass Bilder nie aus ihrem Container herausragen.

object-fit: Bilder zuschneiden

Wenn Bilder eine feste Hoehe haben sollen, ohne verzerrt zu werden:

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;    /* Bild fuellt den Bereich, schneidet ueberschuessiges ab */
}

Alle object-fit Werte

.cover { object-fit: cover; }       /* Fuellt den Bereich, schneidet ab */
.contain { object-fit: contain; }   /* Passt komplett rein, mit Leerraum */
.fill { object-fit: fill; }         /* Streckt/verzerrt (Standard) */
.none { object-fit: none; }         /* Originalgroesse, schneidet ab */
.scale-down { object-fit: scale-down; } /* Wie contain, aber nie groesser */

object-position: Fokuspunkt bestimmen

.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center top;  /* Fokus auf den oberen Bereich */
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;  /* Fokus etwas ueber der Mitte */
}

srcset: Mehrere Bildgroessen anbieten

Mit srcset bietest du dem Browser verschiedene Bildgroessen an. Er waehlt die beste Option:

<img src="bild-800.jpg"
     srcset="bild-400.jpg 400w,
             bild-800.jpg 800w,
             bild-1200.jpg 1200w,
             bild-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1000px) 50vw,
            33vw"
     alt="Beschreibung"
     loading="lazy">

Wie der Browser entscheidet

1. Er schaut auf sizes, um zu wissen, wie breit das Bild dargestellt wird
2. Er prueft die Pixeldichte des Displays (1x, 2x, 3x)
3. Er waehlt das kleinste Bild, das gut genug ist

srcset fuer Pixeldichte

Fuer Bilder mit fester Groesse (z.B. Logos):

<img src="logo-200.png"
     srcset="logo-200.png 1x,
             logo-400.png 2x,
             logo-600.png 3x"
     alt="Firmenlogo"
     width="200"
     height="50">

Das picture-Element

Fuer maximale Kontrolle ueber verschiedene Bildquellen:

Format-Auswahl

<picture>
    <source srcset="bild.avif" type="image/avif">
    <source srcset="bild.webp" type="image/webp">
    <img src="bild.jpg" alt="Beschreibung" loading="lazy">
</picture>

Der Browser verwendet das erste Format, das er unterstuetzt.

Art Direction

Zeige auf verschiedenen Bildschirmgroessen unterschiedliche Bildausschnitte:

<picture>
    <source media="(max-width: 600px)"
            srcset="bild-portrait.jpg">
    <source media="(max-width: 1000px)"
            srcset="bild-square.jpg">
    <img src="bild-landscape.jpg"
         alt="Produktbild"
         loading="lazy">
</picture>

Kombination: Format + Responsive

<picture>
    <source media="(min-width: 800px)"
            srcset="desktop.avif" type="image/avif">
    <source media="(min-width: 800px)"
            srcset="desktop.webp" type="image/webp">
    <source srcset="mobile.avif" type="image/avif">
    <source srcset="mobile.webp" type="image/webp">
    <img src="mobile.jpg" alt="Beschreibung" loading="lazy">
</picture>

Responsive Hintergrundbilder

.hero {
    background-image: url('hero-mobile.jpg');
    background-size: cover;
    background-position: center;
    min-height: 50vh;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-tablet.jpg');
        min-height: 70vh;
    }
}

@media (min-width: 1200px) {
    .hero {
        background-image: url('hero-desktop.jpg');
        min-height: 80vh;
    }
}

/* Modern mit image-set() */
.hero {
    background-image: image-set(
        url('hero.avif') type('image/avif'),
        url('hero.webp') type('image/webp'),
        url('hero.jpg') type('image/jpeg')
    );
}

Responsive Videos

Eigene Videos

video {
    max-width: 100%;
    height: auto;
}

YouTube/Vimeo Embeds (Iframes)

Iframes behalten ihr Seitenverhaeltnis nicht automatisch bei. Die Loesung:

/* Moderne Loesung mit aspect-ratio */
.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

<div class="video-container">
    <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
            title="Video-Titel"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media"
            allowfullscreen
            loading="lazy">
    </iframe>
</div>

Lazy Loading

Bilder und Iframes erst laden, wenn sie in den sichtbaren Bereich scrollen:

<!-- Native Lazy Loading -->
<img src="bild.jpg" alt="Beschreibung" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

<!-- Eager Loading fuer wichtige Bilder (Above the Fold) -->
<img src="hero.jpg" alt="Hero" loading="eager">

fetchpriority fuer wichtige Bilder

<!-- Hoch-priorisierte Bilder (LCP-Element) -->
<img src="hero.jpg" alt="Hero" fetchpriority="high">

<!-- Niedrig-priorisierte Bilder -->
<img src="dekoration.jpg" alt="" fetchpriority="low" loading="lazy">

Bildoptimierung — Checkliste

Punkt	Massnahme
Format	WebP oder AVIF verwenden
Groesse	Nicht groesser als die Anzeigegroesse
Komprimierung	Qualitaet 75-85% fuer Fotos
Lazy Loading	loading="lazy" fuer Below-the-Fold
Breite/Hoehe	width und height angeben (CLS vermeiden)
Alt-Text	Immer beschreibend ausfuellen
srcset	Mehrere Groessen fuer verschiedene Viewports

Aspect Ratio beibehalten

/* Festes Seitenverhaeltnis mit aspect-ratio */
.image-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Verschiedene Seitenverhaeltnisse */
.square { aspect-ratio: 1 / 1; }
.landscape { aspect-ratio: 16 / 9; }
.portrait { aspect-ratio: 3 / 4; }
.golden { aspect-ratio: 1.618 / 1; }

Uebungen

Uebung 1: Responsive Bildergalerie

Erstelle eine Bildergalerie mit:

• <picture> fuer verschiedene Formate (WebP + JPEG Fallback)
• loading="lazy" fuer alle Bilder
• object-fit: cover fuer einheitliche Darstellung

Uebung 2: Hero mit Art Direction

Erstelle eine Hero-Sektion mit:

• Einem Hochformat-Bild auf Mobile
• Einem Querformat-Bild auf Desktop
• fetchpriority="high" fuer schnelles Laden

Uebung 3: Responsive Video-Sektion

Bette ein YouTube-Video responsive ein mit aspect-ratio: 16 / 9 und loading="lazy".

Was kommt als Naechstes?

Im naechsten Kapitel lernst du CSS Custom Properties (Variablen):

• Variablen definieren und verwenden
• Dynamische Themes erstellen
• Dark Mode mit Custom Properties

Zusammenfassung

• max-width: 100%; height: auto; ist die Basis fuer responsive Bilder
• object-fit: cover schneidet Bilder zu, ohne sie zu verzerren
• srcset und sizes liefern verschiedene Bildgroessen fuer verschiedene Geraete
• <picture> gibt dir volle Kontrolle ueber Format und Art Direction
• loading="lazy" verbessert die Ladezeit erheblich
• aspect-ratio haelt das Seitenverhaeltnis ohne Tricks
• WebP und AVIF bieten die beste Komprimierung

---