Web-Bilder und Responsive Image Markup

Dieser Artikel behandelt die Grundlagen der Einbindung von Bildern in HTML, verschiedene Web-Bildformate, die Einbindung von SVG-Dateien sowie Methoden zur Erstellung responsiver Bilder für unterschiedliche Displaytypen und Bildschirmgrößen[cite: 3, 4].

Für die Nutzung auf Webseiten eignen sich verschiedene Raster- und Vektorgrafikformate[cite: 4]:

• Bitmapped (Rastergrafiken): Bestehen aus einem Raster aus farbigen Pixeln (z. B. PNG, JPEG, GIF, WebP)[cite: 4].
• Vektorgrafiken: Enthalten mathematisch definierte Pfade und Formen (z. B. SVG)[cite: 4].

Bilder werden in HTML mit dem leeren <img>-Element eingebunden[cite: 4]:

<img src="/images/beispiel.png" alt="Beispielbeschreibung" width="300" height="200">

• src (Source): Gibt die URL bzw. den Pfad zur Bilddatei an[cite: 4].
  • Leistungstipp: Das Nutzen einheitlicher Pfade unterstützt das Browser-Caching, da redundante Serveranfragen vermieden werden[cite: 4].
• alt (Alternative Text): Bietet Textalternativen für Screenreader, Suchmaschinen oder falls das Bild nicht geladen werden kann[cite: 4].

• Der Text sollte Funktion und Inhalt des Bildes angemessen vermitteln[cite: 4].
• Bei rein dekorativen Bildern ein leeres Alt-Attribut nutzen: alt=„“[cite: 4].
• Dient ein Bild als Link, beschreibt der Alt-Text das Linkziel[cite: 4].
• Formulierungen wie „Ein Bild von…“ oder „Grafik von…“ vermeiden[cite: 4].

• Definieren die Anzeigegröße in Pixeln[cite: 4].
• Helfen dem Browser, vor dem Laden der Bilddatei den Platz im Layout zu reservieren[cite: 4].
• Hinweis: Bei responsiven Layouts oder Anpassungen via CSS sollten diese Attribute weggelassen werden[cite: 4].

SVG-Dateien sind XML-basierte Vektordateien[cite: 4]. Sie können auf drei Arten eingebunden werden[cite: 4]:

<img src="/images/circle.svg" alt="Kreis">

• Vorteile: Einfach, universell unterstützt[cite: 4].
• Nachteile: Das SVG kann nicht via Skript/CSS manipuliert werden und darf keine externen Ressourcen enthalten[cite: 4].

<object type="image/svg+xml" data="pizza.svg">
  <img src="pizza.png" alt="Pizza Fallback">
</object>

• Vorteile: SVG kann mit Skripten arbeiten und externe Dateien nutzen[cite: 4].
• Nachteile: CSS des Hauptdokuments gilt nicht direkt; teils fehleranfällig in manchen Browsern[cite: 4].

<p>Hier ist ein Inline-SVG:
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50" height="50">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
</p>

• Vorteile: Vollständige Kontrolle über CSS-Styling und JavaScript-Interaktion im DOM[cite: 4].
• Nachteile: Vergrößert den HTML-Code, erschwert die Wartung, kein Caching für das Bild[cite: 4].

Responsive Images ermöglichen es, dem Browser mehrere Bildquellen zur Verfügung zu stellen, sodass dieser abhängig von der Umgebung des Nutzers das optimale Bild auswählt[cite: 3].

Es gibt vier Hauptanwendungsfälle[cite: 3]:

Standard-Bildschirme nutzen ein 1:1-Verhältnis von CSS-Pixeln zu Gerätepixeln[cite: 3]. High-Density-Displays (Retina etc.) besitzen die 2-, 3- oder 4-fache Menge an Pixeln pro Fläche[cite: 3].

Um Unschärfen zu vermeiden, wird das Attribut srcset mit dem x-Deskriptor verwendet[cite: 3]:

<img src="/images/photo-200px.jpg" alt="Foto"
     srcset="/images/photo-400px.jpg 2x,
             /images/photo-600px.jpg 3x">

• src dient als Fallback für Standarddichten[cite: 3].
• Der Browser wählt anhand der Display-Auflösung automatisch die passende Datei[cite: 3].
• Geeignet für Bilder, deren Anzeigegröße im Layout unverändert bleibt[cite: 3].

Wenn die Bildgröße vom Viewport (Browserfenster) abhängt, nutzt man w-Deskriptoren (Pixelbreite des Bildes) zusammen mit dem sizes-Attribut[cite: 3]:

<img src="strawberries-640.jpg" alt="Erdbeeren"
     srcset="strawberries-480.jpg 480w,
             strawberries-960.jpg 960w,
             strawberries-1280.jpg 1280w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 960px) 70vw,
            240px">

• Funktionsweise:
  • Bei Bildschirmen bis 480px Breite nimmt das Bild 100% der Viewport-Breite ein[cite: 3].
  • Zwischen 481px und 960px nimmt das Bild 70% der Viewport-Breite ein[cite: 3].
  • Bei Bildschirmen über 960px Breite hat das Bild eine feste Breite von 240px[cite: 3].
• Der Browser berechnet anhand dieser Infos die benötigte Auflösung und lädt die optimal passende Datei aus srcset herunter[cite: 3].

Wenn das Motiv je nach Bildschirmgröße angepasst, zugeschnitten (Ausschnitt) oder im Format (Hoch-/Querformat) verändert werden soll, nutzt man das <picture>-Element[cite: 3]:

<picture>
  <source media="(min-width: 1024px)" srcset="dinner-large.jpg">
  <source media="(min-width: 760px)" srcset="dinner-medium.jpg">
  <img src="dinner-small-cropped.jpg" alt="Abendessen Nahaufnahme">
</picture>

• <picture> dient als Wrapper[cite: 3].
• <source>-Elemente prüfen Medienbedingungen via media-Attribut von oben nach unten[cite: 3].
• Das <img>-Element ist zwingend erforderlich und muss an letzter Stelle stehen[cite: 3].

Um moderne Formate mit besserer Kompression (wie WebP oder JPEG XR) bereitzustellen, ohne ältere Browser auszuschließen[cite: 3]:

<picture>
  <source type="image/webp" srcset="pizza.webp">
  <source type="image/jxr" srcset="pizza.jxr">
  <img src="pizza.jpg" alt="Pizza">
</picture>

• Der Browser nutzt das erste Format, das er unterstützt, und ignoriert die restlichen[cite: 3].

• Die Attribute srcset, sizes sowie die Elemente <picture> und <source> werden von allen modernen Browsern unterstützt[cite: 3].
• Durch das integrierte Fallback-<img>-Element bleibt die Abwärtskompatibilität gewahrt[cite: 3].
• Für sehr alte Browser kann das Polyfill-Skript Picturefill eingesetzt werden[cite: 3].