Bilder effektiv in HTML einfügen: Ein umfassender Leitfaden

Foto des Autors

By Jan

Das HTML-Element <img> und seine Attribute

Das <img>-Element in HTML ist dafür verantwortlich, Bilder in deine Webseite einzubinden. Es verfügt über eine Reihe von Attributen, die dir die Kontrolle über verschiedene Aspekte des angezeigten Bildes geben.

Erforderliche Attribute

Das <img>-Element erfordert zwei Pflichtatttribute:

  • src: Dies ist die URL des Bildes, das du anzeigen möchtest.
  • alt: Dieser alternative Text beschreibt das Bild für Benutzer, die es nicht sehen können, beispielsweise wenn das Bild nicht geladen wird oder wenn die Webseite von einem Screenreader vorgelesen wird.

Optionale Attribute

Zusätzlich zu den Pflichtatributen stehen dir weitere optionale Attribute zur Verfügung, um die Darstellung und das Verhalten des Bildes anzupassen:

  • width: Legt die Breite des Bildes in Pixel fest.
  • height: Legt die Höhe des Bildes in Pixel fest.
  • style: Ermöglicht dir, benutzerdefinierte CSS-Stile auf das Bild anzuwenden.
  • title: Gibt einen Titel an, der angezeigt wird, wenn du mit der Maus über das Bild fährst.
  • align: Steuert die Ausrichtung des Bildes im Textfluss (z. B. "left", "right" oder "center").
  • hspace: Legt den horizontalen Abstand (in Pixel) zwischen dem Bild und dem umgebenden Text fest.
  • vspace: Legt den vertikalen Abstand (in Pixel) zwischen dem Bild und dem umgebenden Text fest.

Verwendung des <img>-Elements

Um ein Bild in deine Webseite einzubinden, verwende folgende Syntax:

<img src="pfad/zum/bild.jpg" alt="Alternativer Text">

Beispiel:

<img src="images/mein-bild.jpg" alt="Ein Bild von mir">

Vorteile der Verwendung von <img>

Die Verwendung des <img>-Elements bietet mehrere Vorteile:

  • Einfache und intuitive Syntax
  • Flexible Kontrolle über Größe, Ausrichtung und andere Aspekte des Bildes
  • Unterstützung für verschiedene Bildformate (z. B. JPEG, PNG, GIF)
  • Barrierefreiheit durch Bereitstellung eines alternativen Textes für Benutzer, die das Bild nicht sehen können

Quelle und Alt-Text festlegen

Beim Einbinden von Bildern in HTML sind zwei Attribute von entscheidender Bedeutung: src und alt. Diese beiden Attribute stellen sicher, dass dein Bild richtig angezeigt wird und auch für Nutzer zugänglich ist, die das Bild nicht sehen können.

Die Quelle des Bildes angeben

Das src-Attribut gibt die Quelle deines Bildes an, d. h. den Speicherort der Bilddatei. Diese Quelle kann ein absoluter Pfad (z. B. /images/logo.png) oder ein relativer Pfad (z. B. ../images/logo.png) sein. Du kannst auch eine vollständige URL verwenden, wenn sich das Bild auf einer anderen Website befindet.

Beispiel:

<img src="images/logo.png" alt="Logo der Website">

Alternativen Text schreiben

Der Alternativtext (alt) ist eine textuelle Beschreibung deines Bildes. Er wird angezeigt, wenn das Bild nicht geladen werden kann oder wenn ein Nutzer einen Screenreader verwendet. Der Alternativtext sollte kurz und prägnant sein und den Inhalt des Bildes genau beschreiben.

Vermeide es, als Alternativtext "Bild" oder "Foto" zu verwenden, da dies Nutzern keine nützlichen Informationen liefert.

Beispiel:

<img src="images/produkte/rote-rose.jpg" alt="Eine rote Rose mit grünen Blättern">

Tipps zum Schreiben von Alternativtexten:

  • Beschreibe den Hauptinhalt des Bildes.
  • Verwende eindeutige und prägnante Sprache.
  • Vermeide es, den Dateinamen des Bildes zu verwenden.
  • Fasse die Bildinformationen so kurz wie möglich zusammen, insbesondere wenn es sich um ein komplexes Bild handelt.

Beispiel für einen guten Alternativtext:

<img src="images/startseite/angebot-des-monats.png" alt="Angebot des Monats: 30 % Rabatt auf alle Blumensträuße">

Beispiel für einen schlechten Alternativtext:

<img src="images/startseite/bild.png" alt="Bild">

Bildgröße, Ausrichtung und Beschriftung

Festlegen der Bildgröße

Die Größe eines Bildes kann durch die Attribute width und height festgelegt werden. Diese Werte werden in Pixeln angegeben. Wenn du die Größe nicht angibst, wird das Bild in seiner Originalgröße angezeigt. Du solltest jedoch die Größe deiner Bilder immer angeben, da dies hilft, die Ladezeit der Seite zu verbessern.

Ausrichtung des Bildes

Du kannst die Ausrichtung eines Bildes mit dem Attribut align festlegen. Die möglichen Werte sind:

  • left: Richtet das Bild links aus
  • right: Richtet das Bild rechts aus
  • center: Zentriert das Bild
  • top: Richtet das Bild oben aus
  • bottom: Richtet das Bild unten aus

Hinzufügen einer Beschriftung

Eine Beschriftung ist ein Text, der unter einem Bild angezeigt wird und zusätzliche Informationen über das Bild liefert. Um eine Beschriftung hinzuzufügen, verwende das Element <figcaption>.

<figure>
  <img src="bild.jpg" alt="Bildbeschreibung">
  <figcaption>Dies ist eine Bildbeschriftung.</figcaption>
</figure>

Verwendung von CSS zur Steuerung der Bildgröße und -ausrichtung

Du kannst auch CSS verwenden, um die Größe und Ausrichtung von Bildern zu steuern. Dies ist besonders nützlich, wenn du responsives Design verwendest, bei dem sich das Layout der Seite je nach Bildschirmgröße anpasst.

img {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

Dieser CSS-Code legt fest, dass alle Bilder in voller Breite angezeigt werden, jedoch eine maximale Breite von 500 Pixeln haben. Außerdem werden die Bilder in der Mitte zentriert.

Optimierung der Bilder für das Web

Bei der Optimierung deiner Bilder für das Web stehen Geschwindigkeit, Qualität und Platzbedarf im Vordergrund. Befolge diese Tipps, um sicherzustellen, dass deine Bilder sowohl für deine Website als auch für deine Benutzer optimiert sind:

Kompression

Verwende komprimierte Dateiformate: PNG- und JPEG-Formate unterstützen die verlustfreie bzw. verlustbehaftete Kompression. Wäge die geringere Dateigröße von JPEGs gegen den potenziellen Qualitätsverlust ab.

Verwende Bildoptimierungstools: Online-Tools wie TinyPNG und JPEGmini reduzieren die Dateigröße deiner Bilder automatisch, ohne die Qualität merklich zu beeinträchtigen.

Abmessungen

Passe die Bildgröße an: Verwende nur Bilder mit der erforderlichen Größe. Größere Bilder erfordern mehr Ladezeit.

Verwende das <srcset>-Attribut: Das <srcset>-Attribut ermöglicht es dir, Bildvarianten mit unterschiedlichen Auflösungen bereitzustellen, sodass Browser die optimalen Bilder für verschiedene Bildschirmgrößen auswählen können.

Formate

Verwende WebP-Bilder: WebP ist ein von Google entwickeltes Bildformat, das sowohl verlustfreie als auch verlustbehaftete Komprimierung bietet und in der Regel kleinere Dateigrößen als PNG- oder JPEG-Bilder erzeugt.

Erwäge SVG-Bilder: SVG-Bilder (Scalable Vector Graphics) sind vektorbasiert, sodass sie unabhängig von der Größe gestochen scharf bleiben. Sie eignen sich ideal für Logos und Symbole.

Alternativtexte

Füge Alternativtexte hinzu: Alternativtexte sind für die Barrierefreiheit und Suchmaschinenoptimierung (SEO) unerlässlich. Sie beschreiben das Bild, sodass es für Benutzer mit Sehbehinderungen und für Suchmaschinen interpretiert werden kann.

Caching

Nutze Browser-Caching: Aktiviere das Caching in deiner Website-Konfiguration, damit Bilder von Browsern zwischengespeichert werden. Dies reduziert die Ladezeiten bei nachfolgenden Besuchen derselben Seite.

Einbinden von Bildern aus verschiedenen Quellen

Bisher hast du gelernt, wie du Bilder von deinem lokalen Computer einbindest. Was aber, wenn sich die Bilder auf einem anderen Server oder einer anderen Website befinden? In diesem Abschnitt erfährst du, wie du Bilder aus verschiedenen Quellen in dein HTML-Dokument einbindest.

Bilder von einer anderen Website einbinden

Manchmal musst du ein Bild von einer anderen Website verwenden. Dies kann aus verschiedenen Gründen erforderlich sein, z. B. wenn du über die Website eines anderen berichtest oder wenn du ein Bild verwendest, das jemand anderes erstellt hat.

Um ein Bild von einer anderen Website einzubinden, musst du die URL des Bildes kennen. Die URL findest du, indem du den Mauszeiger über das Bild bewegst und die Adressleiste deines Browsers beobachtest.

Sobald du die URL des Bildes hast, kannst du sie wie folgt in dein HTML-Dokument einfügen:

<img src="https://example.com/image.jpg" alt="Beschreibung des Bildes">

Ersetze "https://example.com/image.jpg" durch die tatsächliche URL des Bildes.

Hinweis: Bevor du Bilder von anderen Websites verwendest, stelle sicher, dass du die Erlaubnis des Rechteinhabers hast.

Bilder von einem Content Delivery Network (CDN)

Content Delivery Networks (CDNs) sind Server, die Bilder und andere statische Inhalte speichern und bereitstellen. Sie werden verwendet, um die Ladezeiten von Websites zu verbessern, indem die Inhalte von einem Server in der Nähe des Benutzers bereitgestellt werden.

Um ein Bild von einem CDN einzubinden, musst du die URL des Bildes vom CDN erhalten. Diese URL findest du typischerweise in der Dokumentation des CDN.

Sobald du die URL des Bildes hast, kannst du sie wie folgt in dein HTML-Dokument einfügen:

<img src="https://cdn.example.com/image.jpg" alt="Beschreibung des Bildes">

Ersetze "https://cdn.example.com/image.jpg" durch die tatsächliche URL des Bildes.

Daten-URIs

Daten-URIs ermöglichen es dir, Bilddaten direkt in dein HTML-Dokument einzubetten. Dies kann nützlich sein, wenn das Bild klein ist oder du es nicht von einem externen Server laden möchtest.

Um ein Bild als Daten-URI einzubetten, musst du das Bild zunächst in eine Base64-Zeichenfolge konvertieren. Es gibt verschiedene Online-Tools, die dies kostenlos durchführen können.

Sobald du die Base64-Zeichenfolge hast, kannst du sie wie folgt in dein HTML-Dokument einfügen:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAySURBVHhe7dBBCwAggEMQB我和7O/rrn5Z/nNUQAAAAASUVORK5CYII=" alt="Beschreibung des Bildes">

Ersetze "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAySURBVHhe7dBBCwAggEMQB我和7O/rrn5Z/nNUQAAAAASUVORK5CYII=" durch die tatsächliche Base64-Zeichenfolge.

Barrierefreiheit von Bildern

Bilder sind ein wesentlicher Bestandteil des Webs, aber sie können für Personen mit Behinderungen unzugänglich sein. Vergewissere dich, dass deine Bilder für alle zugänglich sind, indem du die folgenden Richtlinien befolgst:

Beschreibe deine Bilder mit Alt-Text

Der Alt-Text ist ein Attribut des img-Elements, das Text enthält, der das Bild beschreibt. Dieser Text wird von Screenreadern vorgelesen, sodass blinde oder sehbehinderte Nutzer verstehen können, was auf dem Bild zu sehen ist. Achte darauf, dass dein Alt-Text prägnant, aber beschreibend ist und die wichtigsten Informationen zum Bild enthält.

Verwende aussagekräftige Dateinamen

Der Dateiname des Bildes kann auch dazu beitragen, seine Barrierefreiheit zu verbessern. Verwende anstelle von kryptischen Namen wie "Bild1.jpg" beschreibende Dateinamen wie "Produktfoto-rot-shirt.jpg". Dies hilft Suchmaschinen und Screenreadern, das Bild zu identifizieren.

Biete Textalternativen für komplexe Bilder

Für komplexe Bilder wie Diagramme oder Infografiken kann es schwierig sein, sie mit Alt-Text angemessen zu beschreiben. In diesen Fällen solltest du eine Textalternative bereitstellen, die die gleichen Informationen wie das Bild vermittelt. Dies kann ein Textblock, eine Tabelle oder eine Aufzählungsliste sein.

Verwende Farbkontraste

Wenn du Text über Bilder legst, stelle sicher, dass der Text genügend Kontrast zum Hintergrund hat, damit er für Personen mit Sehbehinderungen sichtbar ist. Verwende Tools wie den Contrast Checker, um den Kontrast zu überprüfen.

Vermeide blinkende oder sich bewegende Bilder

Blinkende oder sich bewegende Bilder können für Menschen mit Epilepsie oder Lichtempfindlichkeit auslösend sein. Verwende solche Bilder nur, wenn sie unbedingt notwendig sind, und sorge dafür, dass sie nicht automatisch abspielen oder sich zu schnell bewegen.

Fehlerbehebung bei der Bildanzeige

Solltest du Probleme haben, deine Bilder in HTML anzuzeigen, sind hier ein paar Tipps zur Fehlerbehebung:

Überprüfe den Dateipfad

  • Stelle sicher, dass der Pfad zur Bilddatei korrekt ist.
  • Verwende einen absoluten Pfad (z. B. /images/example.jpg) oder einen relativen Pfad (z. B. ../images/example.jpg) relativ zum aktuellen Dokument.

Überprüfe die Schreibweise

  • Achte darauf, dass das HTML-Element <img> korrekt geschrieben ist, einschließlich der schließenden Klammer >.
  • Stelle sicher, dass die Attribute src und alt richtig geschrieben und mit Anführungszeichen versehen sind.

Verwende ein valides HTML

  • Überprüfe deinen Code auf Fehler, indem du ihn über einen HTML-Validator laufen lässt.
  • Ungültiger HTML-Code kann zu Anzeigeproblemen führen.

Überprüfe die Dateiberechtigungen

  • Stelle sicher, dass der Webserver die Berechtigung hat, auf die Bilddatei zuzugreifen.
  • Wenn der Webserver keine Berechtigung hat, kann das Bild nicht angezeigt werden.

Überprüfe den Bildtyp

  • HTML unterstützt nicht alle Bildtypen.
  • Übliche Bildformate, die unterstützt werden, sind: JPEG, PNG und GIF.

Zusätzliche Tipps

  • Leere den Cache deines Browsers: Manchmal können alte Cache-Daten die Anzeige von Bildern stören.
  • Aktualisiere deinen Browser: Stelle sicher, dass du die neueste Version deines Browsers verwendest, da ältere Versionen möglicherweise keine modernen Bildformate unterstützen.
  • Verwende Online-Tools: Es gibt Tools wie den W3C Markup Validation Service, mit denen du deinen HTML-Code auf Fehler überprüfen kannst.
  • Suche professionelle Hilfe: Wenn du das Problem nicht selbst beheben kannst, erwäge, einen Webentwickler um Hilfe zu bitten.

Schreibe einen Kommentar