Um ein Bild in HTML einzubinden, folge diesen einfachen Schritten:
Schritt 1: Den -Tag verstehen
Der <img>-Tag ist ein leeres HTML-Element, das zum Einfügen von Bildern verwendet wird. Er hat folgende Syntax:
<img src="URL">
wobei src das Attribut ist, das die URL des Bildes angibt.
Schritt 2: Festlegen der Bildquelle
Das src-Attribut muss auf die URL des Bildes verweisen, das du einfügen möchtest. Die URL kann eine absolute URL (z. B. https://www.beispiel.com/bild.jpg) oder eine relative URL (z. B. /images/bild.jpg) sein.
Der Alt-Text ist ein optionales Attribut, das einen alternativen Text für das Bild bereitstellt. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann oder wenn assistive Technologien verwendet werden, um die Seite zu lesen. Das Alt-Text-Attribut hat die folgende Syntax:
<img src="URL" alt="Alternativer Text">
Wähle einen prägnanten und beschreibenden Alt-Text, der den Inhalt des Bildes genau wiedergibt.
Schritt 4: Angeben von Breite und Höhe
Die Attribute width und height legen die Breite und Höhe des Bildes in Pixeln fest. Dies ist besonders nützlich, wenn du die Größe des Bildes steuern oder sicherstellen möchtest, dass das Bild mit einem bestimmten Layout übereinstimmt. Die Syntax lautet:
Du kannst die Ausrichtung und Formatierung von Bildern mithilfe der CSS-Eigenschaften float und margin steuern. Mit float kannst du das Bild entweder links oder rechts neben dem Text ausrichten, während margin es dir ermöglicht, den Abstand um das Bild einzustellen.
Schritt 6: Hinzufügen von Hyperlinks zu Bildern
Um einen Hyperlink zu einem Bild hinzuzufügen, wickle das <img>-Tag in ein <a>-Tag ein und setze das href-Attribut auf die Ziel-URL. Die Syntax lautet:
Um ein Bild in HTML einzufügen, verwendest du das <img>-Element. Dieses Element ist ein leeres Element, d. h. es hat keinen Start- und Endtag. Stattdessen wird es wie folgt geschrieben:
Das <img>-Element verfügt über mehrere Attribute, mit denen du das Bild anpassen kannst:
src: (erforderlich) Gibt die URL oder den Dateipfad zur Bilddatei an.
alt: (erforderlich) Ein alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann oder der Bildschirmleser es vorliest.
width: (optional) Legt die Breite des Bildes in Pixeln fest.
height: (optional) Legt die Höhe des Bildes in Pixeln fest.
Tipp
Verwende immer alternative Texte (alt), da sie für die Barrierefreiheit wichtig sind und Menschen mit Sehbehinderungen helfen, den Inhalt deines Bildes zu verstehen.
Beispiel
Der folgende Code fügt ein Bild mit dem Namen "image.jpg" ein, das 200 Pixel breit und 100 Pixel hoch ist:
<img src="image.jpg" alt="Ein Bild von einer Katze" width="200" height="100">
Festlegen der Bildquelle
Der wichtigste Schritt beim Einfügen eines Bildes in HTML ist die Festlegung der Bildquelle. Die Bildquelle ist die URL (Uniform Resource Locator) des Bildes, das angezeigt werden soll. Du kannst ein Bild von deinem eigenen Computer oder von einem anderen Server im Internet verwenden.
Lokale Bilder vs. Bilder im Internet
Wenn du ein lokales Bild verwendest, befindet sich das Bild auf deinem Computer. Um die Quelle für ein lokales Bild festzulegen, verwendest du den Pfad zum Bild. Der Pfad muss relativ zum HTML-Dokument sein, in dem du das Bild einfügst. Beispielsweise befindet sich das Bild "meinbild.jpg" im Ordner "bilder" auf deinem Desktop, würdest du den folgenden Pfad verwenden:
<img src="bilder/meinbild.jpg">
Wenn du ein Bild aus dem Internet verwendest, befindet sich das Bild auf einem anderen Server und du musst die vollständige URL des Bildes angeben. Beispielsweise würdest du die folgende URL verwenden, um ein Bild von HubSpot zu verwenden:
HTML unterstützt eine Vielzahl von Bildformaten, darunter:
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
GIF (Graphics Interchange Format)
SVG (Scalable Vector Graphics)
WEBP (Web Picture Format)
Verwende für die besten Ergebnisse das für deine Zwecke am besten geeignete Format. JPEG eignet sich beispielsweise gut für Fotografien, während PNG für Grafiken mit transparentem Hintergrund geeignet ist.
Verwendung alternativer Texte (Alt-Texte)
Ein alternativer Text (Alt-Text) ist ein kurzer, beschreibender Text, der als Ersatz für ein Bild angezeigt wird, wenn es nicht geladen werden kann oder wenn eine unterstützende Technologie, wie z. B. ein Bildschirmleser, verwendet wird. Alt-Texte sind aus folgenden Gründen wichtig:
Vorteile von Alt-Texten
Barrierefreiheit: Sie ermöglichen es Personen mit Behinderungen, den Inhalt von Bildern zu verstehen.
Suchmaschinenoptimierung (SEO): Suchmaschinen verwenden Alt-Texte, um den Inhalt von Bildern zu verstehen und zu indizieren.
Nutzerfreundlichkeit: Sie helfen Benutzern, schnell den Inhalt eines Bildes zu erfassen, auch wenn es nicht geladen wird.
Hinzufügen eines Alt-Textes
Um einen Alt-Text hinzuzufügen, verwende das alt-Attribut im <img>-Tag:
<img src="bild.jpg" alt="Beschreibung des Bildes">
Best Practices für Alt-Texte
Sei prägnant und beschreibend: Beschreibe den Inhalt des Bildes so kurz und zutreffend wie möglich.
Verwende keine redundanten Informationen: Wiederhole nicht den Titel oder die Bildquelle im Alt-Text.
Verwende keine Informationen, die im Bild nicht enthalten sind: Beschreibe nur das, was tatsächlich auf dem Bild zu sehen ist.
Verwende keine Emojis: Bildschirmleser können Emojis nicht interpretieren.
Häufige Fehler bei Alt-Texten
Fehlende Alt-Texte: Verwende immer einen Alt-Text für jedes Bild.
Nicht beschreibende Alt-Texte: Alt-Texte wie "Bild" oder "Foto" sind nicht hilfreich.
Übermäßig lange Alt-Texte: Halte Alt-Texte kurz und auf den Punkt gebracht.
Irreführende Alt-Texte: Beschreibe Bilder nicht falsch oder übertreibe sie nicht.
Sonderfälle
Dekorative Bilder: Für Bilder, die ausschließlich dekorativ sind und keinen informativen Wert haben, kannst du ein leeres Alt-Text-Attribut verwenden:
<img src="bild.jpg" alt="">
Bilder mit Text: Wenn ein Bild Text enthält, verwende den Alt-Text, um den Text wiederzugeben.
Bilder mit komplexen Inhalten: Für Bilder mit komplexen Inhalten, wie z. B. Diagramme oder Infografiken, kannst du eine ausführlichere Beschreibung im Alt-Text angeben.
Angeben von Breite und Höhe
Neben der Bildquelle kannst du auch die Breite und Höhe des Bildes festlegen. Dies ist wichtig, um sicherzustellen, dass das Bild korrekt angezeigt wird und in das Layout deiner Website passt. Die Attribute width und height werden innerhalb des <img>-Tags angegeben:
<img src="bild.jpg" width="100" height="100">
Vorteile der Angabe von Breite und Höhe
Das Angeben von Breite und Höhe bietet mehrere Vorteile:
Bessere Kontrolle über das Layout: Du kannst Bilder genau an die gewünschte Größe anpassen, um sicherzustellen, dass sie in dein Design passen.
Verkürzte Ladezeiten: Wenn du die Bildgröße angibst, kann der Browser die richtige Bildversion laden und so Ladezeiten sparen.
Verbesserte Barrierefreiheit: Sehbehinderte Benutzer können Bildgrößen über Screenreader erkennen, was die Zugänglichkeit der Website verbessert.
Skalieren und Verzerren von Bildern
Standardmäßig skaliert der Browser Bilder proportional zur angegebenen Breite und Höhe. Wenn du nur ein Attribut angibst, skaliert der Browser das Bild so, dass es dieser Dimension entspricht und das Seitenverhältnis beibehält. Wenn du jedoch beide Attribute angibst, kann das Bild skaliert oder verzerrt werden.
Um ein verzerrtes Bild zu vermeiden, solltest du das Seitenverhältnis des Bildes beibehalten. Wenn das Bild beispielsweise eine Auflösung von 400 x 200 Pixel hat, solltest du es wie folgt skalieren:
<img src="bild.jpg" width="200" height="100">
Responsive Bilder
Wenn du möchtest, dass Bilder auf verschiedenen Geräten und Bildschirmgrößen angepasst werden, kannst du das max-width-Attribut verwenden. Dies weist den Browser an, das Bild nicht größer als die angegebene Breite anzuzeigen:
Dadurch wird das Bild auf Geräten mit einer Bildschirmbreite geringer als 500 Pixel auf 100 % seiner Breite skaliert. Auf größeren Geräten wird es auf eine maximale Breite von 500 Pixel beschränkt.
Ausrichten und Formatieren von Bildern
Neben der Platzierung von Bildern auf der Webseite kannst du sie auch ausrichten und formatieren, um ihr Erscheinungsbild zu verbessern.
Ausrichtung
align="left": Richtet das Bild links am Text aus.
align="right": Richtet das Bild rechts am Text aus.
align="center": Zentriert das Bild auf der Seite.
Formatierung
Rahmen: Du kannst einen Rahmen um das Bild hinzufügen, indem du das Attribut "border" verwendest. Beispiel: <img src="bild.jpg" border="1">
Abstand: Fügt einen Abstand um das Bild herum hinzu. Verwende das Attribut "hspace" für den horizontalen Abstand und "vspace" für den vertikalen Abstand. Beispiel: <img src="bild.jpg" hspace="10" vspace="5">
Größe ändern: Die Größe des Bildes kann durch Festlegen der Attribute "width" und "height" geändert werden. Beispiel: <img src="bild.jpg" width="200" height="150">
Drehen: Drehe das Bild mit dem Attribut "style" und der "transform"-Eigenschaft. Beispiel: <img src="bild.jpg" style="transform: rotate(90deg);">
Hinzufügen von Hyperlinks zu Bildern
Verlinken von Bildern auf andere Seiten
Du kannst Hyperlinks zu Bildern hinzufügen, um Benutzer zu anderen Seiten oder Ressourcen auf deiner Website oder im Internet weiterzuleiten. Um ein Bild mit einem Hyperlink zu versehen, verwendest du das href-Attribut im <img>-Tag.
Das href-Attribut
Das href-Attribut gibt die URL der Seite oder Ressource an, auf die verlinkt werden soll. Du kannst absolute URLs verwenden (die mit "http://" oder "https://" beginnen) oder relative URLs (die mit einem Schrägstrich "/" beginnen).
Standardmäßig öffnen sich durch Klicken auf ein Bild mit Hyperlink die verlinkten Seiten im selben Fenster. Du kannst jedoch das target-Attribut verwenden, um das Öffnungsverhalten zu ändern.
Zielattributwerte:
_blank: Öffnet die Seite in einem neuen Fenster oder Tab
_self: Öffnet die Seite im aktuellen Fenster
_parent: Öffnet die Seite im übergeordneten Fenster (sofern vorhanden)
_top: Öffnet die Seite im obersten Fenster (dem Browserfenster)
Füge immer Alt-Texte hinzu, um den Inhalt von Bildern für Besucher zu beschreiben, die Bildschirmlesegeräte verwenden oder deren Bilder nicht geladen werden können.
Sorge für einen ausreichenden Kontrast zwischen Bildinhalten und Hintergrundfarben, um die Lesbarkeit für Personen mit Sehbehinderungen zu verbessern.
Ausschnitt und Größenanpassung
Passe Bilder an die Größe des Anzeigebereichs an, um unnötiges Scrollen zu vermeiden.
Verwende die Attribute "width" und "height", um die physischen Abmessungen des Bildes anzugeben.
Formatierung und Ausrichtung
Verwende CSS-Stile, um Bilder auszurichten, Ränder hinzuzufügen und deren Darstellung zu steuern.
Ziehe in Erwägung, CSS-Sprites (https://css-tricks.com/css-sprites/) zu verwenden, um mehrere kleine Bilder in einer einzelnen Datei zu kombinieren und so HTTP-Anfragen zu reduzieren.
Semantisches HTML
Verwende semantische HTML-Elemente wie und, um Bilder mit erklärenden Bildunterschriften zu versehen.
Vermeide die Verwendung des
-Tags für die Bildformatierung und verwende stattdessen geeignete Tags wie und
.
Fehlerbehandlung
Verwende ein Fallback-Bild, das angezeigt wird, falls das primäre Bild nicht geladen werden kann.
Verwende das Attribut "srcset" mit mehreren Bildern, um Bilder mit unterschiedlichen Auflösungen für verschiedene Geräte bereitzustellen.
