HTML Responsive Bilder mit srcset

Smartphone lädt 4K-Bild, Desktop bekommt Mini-Version – das ist FALSCH! Mit HTML srcset bekommt jedes Gerät die optimale Bildgröße. Schnellere Ladezeiten, weniger Datenverbrauch. Los geht's!

Einführung in das HTML Responsive Bilder Tutorial

Was sind responsive Bilder

Responsive Bilder passen sich automatisch an:

• Smartphone bekommt kleines Bild (spart Daten)
• Desktop bekommt großes Bild (sieht scharf aus)
• Retina-Display bekommt hochauflösendes Bild

Warum srcset verwenden

• Schnellere Ladezeiten: Kleinere Bilder = schneller
• Weniger Datenverbrauch: Mobiler Traffic wird geschont
• Bessere Core Web Vitals: Google belohnt das

Was du in diesem Tutorial lernst

• srcset-Syntax verstehen
• sizes-Attribut richtig einsetzen
• Fallback für alte Browser

Voraussetzungen

Grundlegende HTML-Kenntnisse

Du solltest HTML-Grundlagen und das img-Element verstehen. Falls nicht, hol das kurz nach!

Benötigte Tools

• Texteditor und Browser
• Bilder in verschiedenen Größen (300w, 600w, 1200w)
• Optional: TinyPNG zum Komprimieren

Schritt-für-Schritt-Anleitung

Schritt 1: Grundlegende srcset Syntax

<img src="bild-klein.jpg" 
     srcset="bild-klein.jpg 480w, 
             bild-mittel.jpg 768w, 
             bild-gross.jpg 1200w"
     alt="Beispielbild">

• src: Fallback für alte Browser
• srcset: Liste von Bildern mit Breitenangabe
• 480w: Bild ist 480 Pixel breit

Schritt 2: Typische Breakpoints

<img src="header-mobile.jpg"
     srcset="header-mobile.jpg 480w,
             header-tablet.jpg 768w,
             header-desktop.jpg 1200w,
             header-retina.jpg 2400w"
     alt="Website-Header">

Der Browser wählt automatisch die beste Größe basierend auf Viewport und Pixeldichte!

Schritt 3: sizes-Attribut für präzise Steuerung

Sagt dem Browser: "Das Bild nimmt X% der Viewport-Breite ein"

<img src="artikel-bild.jpg"
     srcset="artikel-klein.jpg 400w,
             artikel-mittel.jpg 800w,
             artikel-gross.jpg 1200w"
     sizes="(max-width: 768px) 100vw,
            (max-width: 1200px) 50vw,
            800px"
     alt="Artikel-Illustration">

• Bis 768px: Bild = 100% Viewport-Breite
• 768px-1200px: Bild = 50% Viewport-Breite
• Über 1200px: Bild = 800px (fix)

Schritt 4: Fallback mit src

src ist dein Sicherheitsnetz:

• Wähle mittlere Größe (funktioniert für die meisten)
• Platziere src VOR srcset im Code

[bildapi id="responsive_image_example" prompt="A diagram showing the same image displayed at different sizes on smartphone, tablet and desktop screens side by side" name="responsive-image-sizes-comparison" alt="Vergleich responsiver Bildgrößen auf verschiedenen Geräten"]

Code-Beispiele zu HTML responsive Bilder

Einfach: Nur Pixeldichte

Für Bilder mit fixer Größe (z.B. Logos):

<img src="logo.png"
     srcset="logo.png 1x,
             logo@2x.png 2x"
     alt="Firmenlogo">

Retina-Displays bekommen @2x-Version!

Komplex: Blog-Artikel Bild

<img src="artikel-mittel.jpg"
     srcset="artikel-xs.jpg 320w,
             artikel-s.jpg 480w,
             artikel-m.jpg 768w,
             artikel-l.jpg 1024w,
             artikel-xl.jpg 1440w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 80vw,
            (max-width: 1024px) 60vw,
            40vw"
     alt="Illustratives Bild zum Artikel"
     loading="lazy">

loading="lazy": Bild erst laden, wenn sichtbar!

Häufige Fehler & Troubleshooting

Fehler 1: Syntax-Fehler

FALSCH: srcset="bild1.jpg 480w bild2.jpg 768w"   ← Komma fehlt!
RICHTIG: srcset="bild1.jpg 480w, bild2.jpg 768w"

Fehler 2: Leerzeichen vergessen

FALSCH: srcset="bild.jpg480w"
RICHTIG: srcset="bild.jpg 480w"

Fehler 3: Dateien existieren nicht

Browser-Konsole (F12) zeigt 404-Fehler wenn Bilder fehlen!

HTML: Best Practices & Tipps

Performance

• Bilder mit TinyPNG oder WebP komprimieren
• loading="lazy" für Bilder außerhalb des Viewports
• 3-4 Bildgrößen reichen (nicht übertreiben)

SEO-freundlich

• Aussagekräftige Dateinamen: stadtpark-herbst-480w.jpg
• Alt-Text nicht vergessen!
• Schnellere Seite = besseres Ranking

Barrierefreiheit

• alt-Attribut ist PFLICHT
• Gilt unabhängig von welcher Bildgröße geladen wird

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kannst jetzt responsive Bilder erstellen:

• srcset für verschiedene Bildgrößen
• sizes für präzise Steuerung nach Viewport
• src als Fallback
• loading="lazy" für Performance

Deine Websites werden schneller laden und auf allen Geräten gut aussehen!

Bereit für mehr? Lerne als Nächstes, wie du HTML Audio und Video einbindest!