====== 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].

===== 1. Web-Bildformate =====

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

^ Format ^ Typ ^ Beschreibung ^
| **PNG** | Bitmapped (Raster) | Unterstützt Transparenzen, ideal für Grafiken mit klaren Kanten[cite: 4]. |
| **JPEG** | Bitmapped (Raster) | Optimal für Fotos mit vielen Farbverläufen[cite: 4]. |
| **GIF** | Bitmapped (Raster) | Geeignet für einfache Animationen und Grafiken mit wenigen Farben[cite: 4]. |
| **SVG** | Vektor | Basiert auf mathematischen Pfaden, beliebig ohne Qualitätsverlust skalierbar[cite: 4]. |
| **WebP** | Bitmapped (Raster) | Moderneres Format mit hoher Kompression[cite: 4]. |

==== Bitmapped vs. Vektor ====
  * **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].

===== 2. Das Standard <img>-Element =====

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

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

==== Erforderliche Attribute ====
  * **''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].

==== Tipps für alternativen Text (alt-Text) ====
  * 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].

==== Attribute ''width'' und ''height'' ====
  * 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].

===== 3. Einbindung von SVG-Dateien =====

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

==== A. Über das <img>-Element ====
<code html>
<img src="/images/circle.svg" alt="Kreis">
</code>
  * **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].

==== B. Über das <object>-Element ====
<code html>
<object type="image/svg+xml" data="pizza.svg">
  <img src="pizza.png" alt="Pizza Fallback">
</object>
</code>
  * **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].

==== C. Inline-SVG (Direktes <svg>-Element) ====
<code html>
<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>
</code>
  * **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].

===== 4. Responsive Image Markup =====

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]:

==== Szenario 1: Displays mit hoher Pixeldichte (x-Deskriptor) ====
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]:

<code html>
<img src="/images/photo-200px.jpg" alt="Foto"
     srcset="/images/photo-400px.jpg 2x,
             /images/photo-600px.jpg 3x">
</code>
  * ''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].

==== Szenario 2: Bilder mit variabler Breite (w-Deskriptor & sizes) ====
Wenn die Bildgröße vom Viewport (Browserfenster) abhängt, nutzt man **w-Deskriptoren** (Pixelbreite des Bildes) zusammen mit dem ''sizes''-Attribut[cite: 3]:

<code html>
<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">
</code>
  * **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].

==== Szenario 3: Art Direction (Das <picture>-Element) ====
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]:

<code html>
<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>
</code>
  * ''<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].

==== Szenario 4: Alternative Bildformate (type-Attribut) ====
Um moderne Formate mit besserer Kompression (wie WebP oder JPEG XR) bereitzustellen, ohne ältere Browser auszuschließen[cite: 3]:

<code html>
<picture>
  <source type="image/webp" srcset="pizza.webp">
  <source type="image/jxr" srcset="pizza.jxr">
  <img src="pizza.jpg" alt="Pizza">
</picture>
</code>
  * Der Browser nutzt das erste Format, das er unterstützt, und ignoriert die restlichen[cite: 3].

===== 5. Browser-Unterstützung =====

  * 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].