css mit Adi Prinz

Flexible Bilder als Grundlage

Ein Bild besitzt normalerweise seine natürliche Breite. Ist diese größer als der verfügbare Container, kann das Bild aus dem Layout hinausragen.

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

width: 100% und max-width: 100%

Die beiden Angaben haben eine unterschiedliche Wirkung:

.image-a {
  width: 100%;
  height: auto;
}

.image-b {
  max-width: 100%;
  height: auto;
}
    

Für Vorschaubilder und Karten ist width: 100% häufig sinnvoll. Für Bilder im normalen Textfluss ist max-width: 100% meistens die bessere Grundeinstellung.

Breite und Höhe im HTML angeben

<img
  src="images/landschaft-800.jpg"
  alt="Berglandschaft an einem sonnigen Tag"
  width="800"
  height="500"
>
    

Die Attribute width und height geben die Abmessungen beziehungsweise das Seitenverhältnis des Bildes bekannt. Der Browser kann dadurch bereits vor dem vollständigen Laden den benötigten Platz reservieren.

CSS darf die tatsächliche Darstellungsgröße weiterhin flexibel verändern:

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

Das Seitenverhältnis mit aspect-ratio

Mit aspect-ratio kann ein gewünschtes Verhältnis zwischen Breite und Höhe festgelegt werden.

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
    

Das Bild erhält unabhängig von seinen ursprünglichen Abmessungen einen Bereich im Verhältnis 16:9. Mit object-fit: cover wird dieser Bereich vollständig ausgefüllt.

Bildbereiche mit object-fit füllen

Wenn Breite und Höhe eines Bildbereichs vorgegeben werden, bestimmt object-fit, wie das Bild darin dargestellt wird.

.preview-image {
  width: 100%;
  height: 18rem;
  object-fit: cover;
}
    

Den sichtbaren Ausschnitt mit object-position steuern

Bei object-fit: cover können Teile eines Bildes abgeschnitten werden. object-position legt fest, welcher Bereich bevorzugt sichtbar bleibt.

.portrait {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}
    

Weitere mögliche Angaben sind beispielsweise:

object-position: center;
object-position: left center;
object-position: right top;
object-position: 30% 20%;
    

Bei Porträts kann center top verhindern, dass der Kopf durch die mittige Beschneidung ungünstig abgeschnitten wird.

Unterschiedliche Bildauflösungen mit srcset

Mit srcset können mehrere Dateien desselben Bildes in unterschiedlichen Breiten angeboten werden.

<img
  src="images/landschaft-800.jpg"
  srcset="
    images/landschaft-480.jpg 480w,
    images/landschaft-800.jpg 800w,
    images/landschaft-1200.jpg 1200w,
    images/landschaft-1600.jpg 1600w
  "
  sizes="100vw"
  alt="Berglandschaft an einem sonnigen Tag"
  width="1600"
  height="1000"
>
    

Der Browser wählt aus den angebotenen Dateien eine geeignete Variante. Er berücksichtigt dabei unter anderem die erwartete Darstellungsbreite und die Pixeldichte des Bildschirms.

Breitenbeschreibungen mit w

srcset="
  images/card-400.jpg 400w,
  images/card-800.jpg 800w,
  images/card-1200.jpg 1200w
"
    

Die Angabe 400w bedeutet, dass die Bilddatei eine tatsächliche Breite von 400 Pixeln besitzt. Sie beschreibt nicht unmittelbar die CSS-Darstellungsbreite.

• 400w: Datei ist 400 Pixel breit
• 800w: Datei ist 800 Pixel breit
• 1200w: Datei ist 1200 Pixel breit

Breitenbeschreibungen werden normalerweise gemeinsam mit dem Attribut sizes verwendet.

Die Darstellungsbreite mit sizes beschreiben

Das Attribut sizes informiert den Browser darüber, wie breit das Bild unter bestimmten Bedingungen ungefähr dargestellt wird.

<img
  src="images/card-800.jpg"
  srcset="
    images/card-400.jpg 400w,
    images/card-800.jpg 800w,
    images/card-1200.jpg 1200w
  "
  sizes="
    (min-width: 75rem) 33vw,
    (min-width: 48rem) 50vw,
    100vw
  "
  alt="Beispiel für ein responsives Kartenbild"
  width="1200"
  height="750"
>
    

Die Bedingungen werden von links nach rechts ausgewertet:

• Ab 75rem wird das Bild ungefähr ein Drittel der Viewport-Breite einnehmen.
• Ab 48rem wird es ungefähr die Hälfte der Viewport-Breite einnehmen.
• Auf schmaleren Viewports wird es ungefähr die gesamte Viewport-Breite einnehmen.

Containerbreite in sizes berücksichtigen

Besitzt die Seite einen begrenzten Inhaltscontainer und Abstände zwischen den Karten, sollte sizes diese Darstellung möglichst realistisch beschreiben.

<img
  src="images/card-800.jpg"
  srcset="
    images/card-400.jpg 400w,
    images/card-800.jpg 800w,
    images/card-1200.jpg 1200w
  "
  sizes="
    (min-width: 75rem) 23rem,
    (min-width: 48rem) calc(50vw - 2rem),
    calc(100vw - 2rem)
  "
  alt="Responsives Bild innerhalb einer Karte"
  width="1200"
  height="750"
>
    

Je genauer sizes die tatsächliche CSS-Darstellung beschreibt, desto besser kann der Browser eine passende Datei auswählen.

Pixeldichte mit x-Beschreibungen

Wenn ein Bild immer mit derselben CSS-Größe dargestellt wird, können Varianten für unterschiedliche Pixeldichten angeboten werden.

<img
  src="images/logo.png"
  srcset="
    images/logo.png 1x,
    images/logo@2x.png 2x
  "
  alt="EDV mit Adi Prinz"
  width="200"
  height="60"
>
    

Ein Bildschirm mit hoher Pixeldichte kann die 2x-Variante wählen. Die CSS-Darstellungsgröße bleibt trotzdem beispielsweise 200 × 60 Pixel.

Art Direction mit <picture>

Manchmal genügt es nicht, dasselbe Bild nur in unterschiedlichen Auflösungen bereitzustellen. Für schmale Viewports kann beispielsweise ein anderer Bildausschnitt sinnvoll sein.

<picture>
  <source
    media="(min-width: 62rem)"
    srcset="
      images/team-breit-1200.jpg 1200w,
      images/team-breit-1800.jpg 1800w
    "
    sizes="100vw"
  >

  <source
    media="(min-width: 36rem)"
    srcset="
      images/team-mittel-800.jpg 800w,
      images/team-mittel-1200.jpg 1200w
    "
    sizes="100vw"
  >

  <img
    src="images/team-hochformat-600.jpg"
    alt="Mitarbeiterinnen und Mitarbeiter bei einer Besprechung"
    width="600"
    height="800"
  >
</picture>
    

Der Browser prüft die <source>-Elemente von oben nach unten. Das <img>-Element bildet den Standardfall und ist zugleich für Alternativtext und Fallback verantwortlich.

Moderne Bildformate mit <picture>

Das <picture>-Element kann auch unterschiedliche Dateiformate anbieten.

<picture>
  <source
    type="image/avif"
    srcset="
      images/landschaft-800.avif 800w,
      images/landschaft-1200.avif 1200w
    "
    sizes="100vw"
  >

  <source
    type="image/webp"
    srcset="
      images/landschaft-800.webp 800w,
      images/landschaft-1200.webp 1200w
    "
    sizes="100vw"
  >

  <img
    src="images/landschaft-800.jpg"
    srcset="
      images/landschaft-800.jpg 800w,
      images/landschaft-1200.jpg 1200w
    "
    sizes="100vw"
    alt="Berglandschaft an einem sonnigen Tag"
    width="1200"
    height="750"
  >
</picture>
    

Der Browser verwendet das erste unterstützte Format. Das JPEG im <img>-Element dient als Fallback.

Bilder verzögert laden

Bilder außerhalb des zunächst sichtbaren Bereichs können mit loading="lazy" verzögert geladen werden.

<img
  src="images/beispiel.jpg"
  alt="Beschreibung des Bildinhalts"
  width="800"
  height="500"
  loading="lazy"
>
    

Das kann die anfängliche Ladezeit und den Datenverbrauch verringern. Besonders wichtig ist dies auf Seiten mit vielen Bildern.

Das wichtigste Bild priorisieren

Ein besonders wichtiges Bild im sichtbaren Bereich kann mit fetchpriority="high" hervorgehoben werden.

<img
  src="images/titelbild-1200.jpg"
  srcset="
    images/titelbild-800.jpg 800w,
    images/titelbild-1200.jpg 1200w,
    images/titelbild-1600.jpg 1600w
  "
  sizes="100vw"
  alt="Responsive Webdesign auf verschiedenen Bildschirmgrößen"
  width="1600"
  height="900"
  fetchpriority="high"
>
    

Die Priorisierung sollte sparsam eingesetzt werden. Wenn viele Bilder eine hohe Priorität erhalten, verliert die Angabe ihre Wirkung.

Asynchrones Dekodieren

<img
  src="images/gallery-1.jpg"
  alt="Beispielbild aus der Galerie"
  width="800"
  height="500"
  loading="lazy"
  decoding="async"
>
    

Mit decoding="async" darf der Browser das Dekodieren des Bildes asynchron durchführen. Dadurch kann die Darstellung anderer Inhalte weniger blockiert werden.

Die Angabe ist ein Hinweis an den Browser und keine Garantie für einen bestimmten Ablauf.

Alternativtexte richtig verwenden

Das Attribut alt beschreibt die Bedeutung oder Funktion eines Bildes. Der passende Text hängt deshalb vom Zusammenhang ab.

<img
  src="images/grid-layout.png"
  alt="Grid-Layout mit Header, Navigation, Hauptbereich und Sidebar"
>
    

Dekorative Bilder erhalten einen leeren Alternativtext:

<img
  src="images/dekorative-linie.svg"
  alt=""
>
    

• Der Alternativtext soll die relevante Bildaussage vermitteln.
• Er sollte nicht mit „Bild von“ oder „Grafik von“ beginnen.
• Informationen aus dem Bild sollten nicht ausschließlich visuell zugänglich sein.
• Ein Bildlink benötigt einen Alternativtext, der das Ziel oder die Funktion des Links beschreibt.
• Dekorative Bilder erhalten alt="", damit sie von Screenreadern übersprungen werden können.

Bildunterschriften mit figure

<figure>
  <img
    src="images/grid-beispiel.png"
    alt="Responsives Grid mit einer, zwei und drei Spalten"
    width="1200"
    height="750"
  >

  <figcaption>
    Das Kartenlayout verändert seine Spaltenanzahl abhängig vom verfügbaren Platz.
  </figcaption>
</figure>
    

<figure> fasst ein Bild mit seiner zugehörigen Beschriftung zusammen. Die Bildunterschrift ersetzt jedoch nicht automatisch einen erforderlichen Alternativtext.

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
  color: #6c757d;
  font-size: 0.9rem;
}
    

Responsive Videos

Ein direkt eingebundenes Video kann ähnlich wie ein Bild flexibel dargestellt werden.

<video
  controls
  width="1280"
  height="720"
  poster="images/video-vorschau.jpg"
  preload="metadata"
>
  <source src="videos/grid-tutorial.webm" type="video/webm">
  <source src="videos/grid-tutorial.mp4" type="video/mp4">

  Ihr Browser unterstützt das Video-Element nicht.
</video>
    

video {
  display: block;
  width: 100%;
  height: auto;
}
    

preload="metadata" lädt zunächst hauptsächlich Metadaten wie die Dauer und Abmessungen des Videos. Die vollständige Videodatei muss dadurch nicht sofort geladen werden.

Eingebettete Videos und iframe

Eingebettete Videos können mit aspect-ratio responsiv dargestellt werden.

<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Einführung in CSS Grid"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>
    

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
    

Der Wrapper behält das Seitenverhältnis bei. Das <iframe> füllt den verfügbaren Bereich vollständig aus.

Responsive SVG-Grafiken

SVG-Grafiken lassen sich ohne Qualitätsverlust vergrößern und verkleinern. Ein korrektes viewBox-Attribut ist dafür besonders wichtig.

<svg
  viewBox="0 0 400 200"
  role="img"
  aria-labelledby="svg-title"
>
  <title id="svg-title">Vereinfachtes responsives Seitenlayout</title>

  <rect
    x="10"
    y="10"
    width="380"
    height="180"
    rx="8"
  ></rect>
</svg>
    

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

Das viewBox-Attribut definiert das interne Koordinatensystem. Ohne feste CSS-Höhe kann die Grafik ihr Seitenverhältnis beim Skalieren beibehalten.

Hintergrundbilder responsiv einsetzen

.hero {
  min-height: 24rem;
  background-image: url("images/hero-small.jpg");
  background-position: center;
  background-size: cover;
}

@media (min-width: 48rem) {
  .hero {
    background-image: url("images/hero-large.jpg");
  }
}
    

Mit background-size: cover füllt das Hintergrundbild den gesamten Bereich. Dabei können Bildteile abgeschnitten werden.

Ein vollständiges responsives Kartenbild

<article class="card">
  <picture>
    <source
      type="image/avif"
      srcset="
        images/grid-480.avif 480w,
        images/grid-800.avif 800w,
        images/grid-1200.avif 1200w
      "
      sizes="
        (min-width: 75rem) 23rem,
        (min-width: 48rem) calc(50vw - 2rem),
        calc(100vw - 2rem)
      "
    >

    <source
      type="image/webp"
      srcset="
        images/grid-480.webp 480w,
        images/grid-800.webp 800w,
        images/grid-1200.webp 1200w
      "
      sizes="
        (min-width: 75rem) 23rem,
        (min-width: 48rem) calc(50vw - 2rem),
        calc(100vw - 2rem)
      "
    >

    <img
      class="card-image"
      src="images/grid-800.jpg"
      srcset="
        images/grid-480.jpg 480w,
        images/grid-800.jpg 800w,
        images/grid-1200.jpg 1200w
      "
      sizes="
        (min-width: 75rem) 23rem,
        (min-width: 48rem) calc(50vw - 2rem),
        calc(100vw - 2rem)
      "
      alt="CSS-Grid mit mehreren Spalten und Karten"
      width="1200"
      height="750"
      loading="lazy"
      decoding="async"
    >
  </picture>

  <div class="card-content">
    <h3>CSS Grid</h3>

    <p>
      Responsive Layouts mit Zeilen, Spalten und flexiblen Tracks erstellen.
    </p>
  </div>
</article>
    

.card {
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
}

.card picture {
  display: block;
}

.card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card-content {
  padding: 1rem;
}
    

Das Beispiel verbindet mehrere Techniken:

• verschiedene Bildbreiten mit srcset
• eine realistische Darstellungsbreite mit sizes
• moderne Dateiformate mit <picture>
• eine reservierte Bildfläche durch width und height
• einheitliche Kartenausschnitte mit aspect-ratio
• verzögertes Laden außerhalb des sichtbaren Bereichs

Häufige Fehler

• Bilder erhalten eine feste Breite und ragen dadurch auf schmalen Viewports aus dem Container heraus.
• height wird festgelegt, ohne das Seitenverhältnis oder object-fit zu berücksichtigen.
• Die Attribute width und height fehlen im HTML, sodass beim Laden Layoutverschiebungen entstehen.
• srcset wird verwendet, aber sizes beschreibt die tatsächliche Darstellungsbreite nicht korrekt.
• Für alle Viewports wird dieselbe sehr große Bilddatei geladen.
• Das wichtigste Bild im sichtbaren Bereich wird mit loading="lazy" verzögert.
• Zu viele Bilder erhalten fetchpriority="high".
• object-fit: cover schneidet wichtige Teile des Bildes ab, ohne dass object-position angepasst wird.
• Inhaltlich wichtige Bilder werden ausschließlich als CSS-Hintergrund eingebunden.
• Alternativtexte fehlen oder enthalten keine sinnvolle Beschreibung.
• <picture> enthält kein abschließendes <img>-Element.
• Videos und eingebettete Frames besitzen feste Abmessungen und werden dadurch auf schmalen Viewports abgeschnitten.

Zusammenfassung

• max-width: 100% und height: auto bilden eine einfache Grundlage für flexible Bilder.
• width und height im HTML helfen dem Browser, den benötigten Platz frühzeitig zu reservieren.
• aspect-ratio legt ein gewünschtes Seitenverhältnis fest.
• object-fit bestimmt, wie ein Bild einen vorgegebenen Bereich ausfüllt.
• object-position steuert den bevorzugten sichtbaren Bildausschnitt.
• srcset bietet mehrere Bilddateien in unterschiedlichen Auflösungen an.
• sizes beschreibt die voraussichtliche Darstellungsbreite des Bildes.
• <picture> ermöglicht Art Direction und verschiedene Dateiformate.
• loading="lazy" eignet sich für Bilder außerhalb des zunächst sichtbaren Bereichs.
• Videos, eingebettete Frames und SVG-Grafiken können ebenfalls flexibel dargestellt werden.
• Alternativtexte machen die Bedeutung und Funktion von Bildern zugänglich.