Bilder in HTML

Grundlegende Bildeinbindung

Bilder werden mit dem <img>-Element eingebunden. Dies ist ein selbstschliessendes Element (ohne End-Tag):

<img src="bild.jpg" alt="Beschreibung des Bildes" />

src (source): Gibt den Pfad zum Bild an. Kann relativ (bezogen auf die aktuelle HTML-Datei) oder absolut sein.

alt (alternative text): Eine Textbeschreibung des Bildes, die essentiell ist für:

• Barrierefreiheit: Screenreader lesen diesen Text vor
• SEO: Suchmaschinen nutzen dies zur Bewertung und Kategorisierung des Bildes
• Fehlerbehebung: Wird angezeigt, wenn das Bild nicht geladen werden kann
• Valides HTML: Das alt-Attribut ist für das img-Element verpflichtend

Ein guter alt-Text beschreibt präzise den Inhalt und Zweck des Bildes. Bei dekorativen Bildern kann alt="" verwendet werden, um anzuzeigen, dass das Bild keine inhaltliche Bedeutung hat.

Wichtige Attribute

<!-- Grösse festlegen -->
<img src="bild.jpg" alt="Beschreibung" width="300" height="200" />

<!-- Titeltext (Tooltip) -->
<img src="bild.jpg" alt="Beschreibung" title="Zusätzliche Infos" />

<!-- Responsive Bilder -->
<img src="bild.jpg" alt="Beschreibung" style="max-width:100%; height:auto;" />

<!-- Lazy Loading -->
<img src="bild.jpg" alt="Beschreibung" loading="lazy" />

width und height: Definieren die Anzeigeabmessungen des Bildes:

• Verhindert Layout-Verschiebungen während des Ladens (Cumulative Layout Shift)
• Hilft dem Browser, den benötigten Platz zu reservieren, bevor das Bild geladen ist
• Sollten idealerweise im nativen Seitenverhältnis des Bildes angegeben werden

title: Erzeugt einen Tooltip, der erscheint, wenn der Mauszeiger über dem Bild schwebt:

• Kann zusätzliche Informationen liefern, die nicht im alt-Text enthalten sind
• Sollte nicht als Ersatz für den alt-Text verwendet werden
• Nicht barrierefreundlich, da nicht für Tastaturnavigation zugänglich

style: Ermöglicht Inline-CSS für das Bild:

• max-width:100% sorgt dafür, dass Bilder nicht über ihren Container hinausragen
• height:auto behält das ursprüngliche Seitenverhältnis bei
• Besser: CSS in externe Stylesheets auslagern

Lazy Loading

Lazy Loading ist eine Technik, bei der Bilder erst dann geladen werden, wenn sie in den sichtbaren Bereich scrollen (oder kurz davor sind):

<img src="bild.jpg" alt="Beschreibung" loading="lazy" />

Vorteile des Lazy Loading:

• Verbessert die initiale Ladezeit der Seite
• Reduziert den Datenverbrauch für Nutzer
• Schont Serverressourcen
• Besonders nützlich bei längeren Seiten mit vielen Bildern

Wann sollte Lazy Loading verwendet werden:

• Für Bilder, die nicht im anfangs sichtbaren Bereich (“above the fold”) liegen
• Bei Bildergalerien oder langen Artikeln mit vielen Bildern
• Bei Produktlisten oder Katalogseiten

Das loading="lazy" Attribut wird von allen modernen Browsern unterstützt und ist eine einfache Möglichkeit, die Leistung zu verbessern, ohne JavaScript zu benötigen.

Bilderformate für das Web

Die Wahl des richtigen Bildformats ist entscheidend für Performance und Darstellungsqualität:

Bildformate

JPG/JPEG:

• Optimal für Fotos und komplexe Bilder mit Farbverläufen
• Verlustbehaftete Kompression (kleinere Dateigrösse auf Kosten der Qualität)
• Unterstützt keine Transparenz
• Breite Browser-Unterstützung

PNG:

• Ideal für Bilder mit wenigen Farben, scharfen Kanten oder Transparenz
• Verlustfreie Kompression (bessere Qualität, aber grössere Dateien)
• Unterstützt Alpha-Kanal (teilweise Transparenz)
• PNG-8 für einfache Grafiken, PNG-24 für komplexere mit Transparenz

SVG:

• Vektorbasiert, beliebig skalierbar ohne Qualitätsverlust
• Ideal für Logos, Icons, Diagramme und Illustrationen
• Sehr kleine Dateigrösse für einfache Grafiken
• Kann mit CSS und JavaScript animiert und manipuliert werden

WebP:

• Modernes Format von Google mit überlegener Kompression
• 25-35% kleinere Dateien als JPEG bei gleicher Qualität
• Unterstützt sowohl verlustfreie als auch verlustbehaftete Kompression
• Unterstützt Animation und Transparenz
• Nicht von älteren Browsern unterstützt (immer Fallback bereitstellen)

GIF:

• Unterstützt simple Animationen und binäre Transparenz
• Stark limitierte Farbpalette (max. 256 Farben)
• Für einfache Animationen, besser durch WebP oder Video ersetzen
• Hohe Dateigrösse bei komplexeren Animationen

Responsive Bilder mit srcset

Das srcset-Attribut ermöglicht die Bereitstellung verschiedener Bildversionen für unterschiedliche Bildschirmgrössen und -auflösungen:

<img
  src="small.jpg"
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive Bild"
/>

src: Fallback für Browser, die srcset nicht unterstützen

srcset: Liste von Bildquellen mit ihrer Breite in Pixeln (w-Deskriptor)

• small.jpg 500w: Bild ist 500px breit
• medium.jpg 1000w: Bild ist 1000px breit
• large.jpg 1500w: Bild ist 1500px breit

sizes: Definiert, wie viel Platz das Bild im Viewport einnehmen wird:

• (max-width: 600px) 100vw: Auf Bildschirmen bis 600px Breite nimmt das Bild 100% der Viewport-Breite ein
• 50vw: Auf grösseren Bildschirmen nimmt das Bild 50% der Viewport-Breite ein

Der Browser wählt automatisch die optimale Bildversion basierend auf:

1. Der Bildschirmgrösse und -auflösung des Geräts
2. Den sizes-Angaben
3. Der Verbindungsgeschwindigkeit (bei aktiviertem Data Saver Modus)

Bilder als Links

Bilder können als anklickbare Links fungieren, indem man sie in ein <a>-Element einbettet:

<a href="grosses-bild.jpg">
  <img src="vorschau.jpg" alt="Vorschaubild - Klicken zum Vergrössern" />
</a>

• Das Bild wird zum Hyperlink und öffnet die verlinkte Ressource beim Klick
• Der alt-Text sollte in diesem Fall auch den interaktiven Aspekt beschreiben (“Klicken zum Vergrössern”)
• Diese Technik ist Standard für Bildergalerien mit Vorschau- und Detailansichten
• Optional kann target="_blank" hinzugefügt werden, um das Bild in einem neuen Tab zu öffnen

Bild mit Figurenbeschriftung

Das <figure>-Element in Kombination mit <figcaption> bietet eine semantisch korrekte Methode, Bilder mit Beschriftungen zu versehen:

<figure>
  <img src="grafik.jpg" alt="Diagramm zur Datenvisualisierung" />
  <figcaption>Abb. 1: Umsatzentwicklung 2022-2023</figcaption>
</figure>

<figure>: Container für eigenständige Inhalte, die thematisch zusammengehören

• Kann Bilder, Diagramme, Code-Blöcke, Videos etc. enthalten
• Kann auch mehrere Medienelemente gruppieren

<figcaption>: Die Bildunterschrift oder Erklärung für den Inhalt

• Kann vor oder nach dem eigentlichen Inhalt stehen
• Wird von Screenreadern als zusammengehörig mit dem Bild erkannt
• Verbessert die Barrierefreiheit und SEO

Anwendungsbereiche:

• Wissenschaftliche Publikationen
• Artikel mit erklärendem Bildmaterial
• Portfolioarbeiten
• Produktkataloge

Komplettes Beispiel mit allen Features

<figure>
  <a href="images/large/landschaft-gross.jpg">
    <img
      src="images/thumbs/landschaft-klein.jpg"
      alt="Berglandschaft in den Schweizer Alpen"
      title="Klicken zum Vergrössern"
      width="300"
      height="200"
      loading="lazy"
      srcset="
        images/small/landschaft-300.jpg   300w,
        images/medium/landschaft-600.jpg  600w,
        images/large/landschaft-1200.jpg 1200w
      "
      sizes="(max-width: 600px) 100vw, 50vw"
    />
  </a>
  <figcaption>
    Abb. 1: Panoramablick auf die Schweizer Alpen im Sommer
  </figcaption>
</figure>

Dieses Beispiel kombiniert alle besprochenen Konzepte:

• Semantische Struktur mit figure und figcaption
• Responsives Bilddesign mit verschiedenen Auflösungen via srcset
• Performance-Optimierung durch Lazy Loading
• Verknüpfung mit einer Detailansicht
• Barrierefreiheit durch aussagekräftigen alt-Text
• Tooltip für zusätzliche Informationen
• Festgelegte Dimensionen zur Vermeidung von Layout-Verschiebungen

Übung: Bilder einfügen

Aufgabe: Bildergalerie und Bildoptimierung für den Blog

1. Erweitern Sie Ihre bestehenden Seiten mit passenden Bildern:

   • Fügen Sie zur Startseite (index.html) ein Profilbild oder ein thematisch passendes Bild hinzu
   • Ergänzen Sie die “Über mich”-Seite mit mindestens einem relevanten Bild
   • Fügen Sie zu jedem Blogartikel mindestens ein passendes Bild hinzu

2. Erstellen Sie eine neue Seite “galerie.html”:

   • Mit der üblichen Navigation und Struktur
   • Erstellen Sie eine Sektion mit der Überschrift “Reisen” und erstellen Sie darin ein div mit der Klasse gallery
   • Organisieren Sie darin die Bilder (Tipp: Das Element figure eignet sich dafür sehr gut). Jedes Bild soll:
     • Eine Überschrift haben
     • Mindestens 3 Vorschaubilder (Thumbnails) mit fester Breite von 200px enthalten
     • Jedes Vorschaubild sollte als Link zu einer grösseren Version des Bildes fungieren

3. Für alle Bilder:

   • Erstellen Sie einen Unterordner “images” mit Unterordnern für verschiedene Kategorien
   • Geben Sie jedem Bild einen sinnvollen Dateinamen
   • Fügen Sie aussagekräftige alt-Texte hinzu
   • Optimieren Sie die Bildgrössen für das Web

4. Für die Galerie:

   • Verwenden Sie loading=“lazy” für alle Bilder ausser den ersten sichtbaren
   • Fügen Sie title-Attribute für Tooltips beim Hover hinzu

Bonus

Erstellen Sie ein “Featured Image” für die Blog-Übersichtsseite, das aus mehreren kleineren Bildern in einem Raster besteht. Nutzen Sie hierfür verschiedene Bildgrössen nebeneinander und konstruieren Sie eine Art “Collage” der wichtigsten Themen Ihres Blogs, wobei jedes Teilbild mit dem entsprechenden Bereich verlinkt ist.

Hinweise

• Sie können eigene Bilder verwenden oder lizenzfreie Bilder von Websites wie Unsplash, Pexels oder Pixabay
• Achten Sie auf angemessene Dateigrössen für das Web (komprimieren Sie grosse Bilder)
• Speichern Sie die Bilder in einem Unterordner “images” für eine saubere Projektstruktur
• Nutzen Sie Tools wie TinyPNG) oder Squoosh zur Bildoptimierung
• Formulieren Sie aussagekräftige alt-Texte, die den Bildinhalt für Menschen beschreiben, die das Bild nicht sehen können
• Bedenken Sie die Ladezeiten - besonders auf mobilen Geräten ist eine optimierte Bildgrösse wichtig