gnider-tam-ge_ftrk7wDc-unsplash

Responsive Images und srcset: So passen sich Bilder jeder Bildschirmgröße und -dichte an

Im mobilen Web zählt jedes Pixel – und jede Ladezeit. Damit deine Website auf allen Geräten perfekt aussieht und schnell lädt, brauchst du responsive Bilder. In diesem Beitrag erklären wir dir, wie srcset funktioniert, warum Bildschirmgrößen und Pixeldichten wichtig sind – und wie du mit ein paar einfachen Kniffen professioneller wirkst.

Warum responsive Bilder wichtig sind

Nicht alle Bildschirme sind gleich. Deine Nutzer surfen mit:

  • kleinen Smartphone-Displays
  • hochauflösenden Retina-Screens
  • großen 4K-Monitoren

Ein statisches Bild in fixer Größe ist entweder zu klein, zu unscharf oder zu datenintensiv. Responsive Bilder sorgen dafür, dass:

  • nur die passende Bildgröße geladen wird
  • die Ladezeit optimiert wird
  • dein Design auf jedem Gerät scharf und stimmig wirkt

Was ist srcset?

Mit dem HTML-Attribut srcset sagst du dem Browser: „Hier sind verschiedene Versionen dieses Bildes – such dir die passende aus.“

Ein einfaches Beispiel:

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

Erklärung:

  • srcset enthält verschiedene Bilddateien mit ihrer Breite (w = width).
  • sizes beschreibt, wie viel Platz das Bild im Layout einnimmt.
  • Der Browser kombiniert beide Infos und lädt das optimal passende Bild.

Auflösung und Pixeldichte: Nicht nur die Breite zählt

Viele Geräte haben High-DPI-Displays (z. B. Retina), bei denen ein CSS-Pixel aus mehreren Hardware-Pixeln besteht. Das bedeutet:

  • Ein 400px-Bild sieht dort unscharf aus.
  • Du brauchst eine Version mit doppelter oder dreifacher Auflösung.

Auch dafür gibt es eine Lösung mit x-Werten:

<img src="bild.jpg"
     srcset="bild.jpg 1x, 
             bild@2x.jpg 2x, 
             bild@3x.jpg 3x"
     alt="Scharfes Bild auf allen Geräten">

So wählt der Browser je nach Pixeldichte die passende Variante.

Best Practices für responsive Bilder

  • Verwende immer srcset, wenn dein Bild auf verschiedenen Geräten sichtbar ist.
  • Kombiniere srcset mit sizes, um volle Kontrolle zu behalten.
  • Komprimiere deine Bilder – egal wie groß sie sind.
  • Nutze moderne Formate wie WebP oder AVIF, um Ladezeiten zu sparen.
  • Teste deine Seite auf echten Geräten – nicht nur im Desktop-Browser.

Fazit: Flexible Bilder, bessere Nutzererfahrung

Responsive Bilder sind kein Luxus – sie sind Standard. Mit srcset und dem richtigen Format sorgst du dafür, dass deine Website überall professionell wirkt. Schneller, schärfer, smarter.

zurück