Bilder in HTML
Grundlegende Bildeinbindung
Abschnitt betitelt „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
Abschnitt betitelt „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 hinausragenheight:autobehält das ursprüngliche Seitenverhältnis bei- Besser: CSS in externe Stylesheets auslagern
Lazy Loading
Abschnitt betitelt „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
Abschnitt betitelt „Bilderformate für das Web“Die Wahl des richtigen Bildformats ist entscheidend für Performance und Darstellungsqualität:
Responsive Bilder mit srcset
Abschnitt betitelt „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 breitmedium.jpg 1000w: Bild ist 1000px breitlarge.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 ein50vw: Auf grösseren Bildschirmen nimmt das Bild 50% der Viewport-Breite ein
Der Browser wählt automatisch die optimale Bildversion basierend auf:
- Der Bildschirmgrösse und -auflösung des Geräts
- Den
sizes-Angaben - Der Verbindungsgeschwindigkeit (bei aktiviertem Data Saver Modus)
Bilder als Links
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
figureundfigcaption - 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
Abschnitt betitelt „Übung: Bilder einfügen“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
Abschnitt betitelt „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