HTML img Tag: So fügen Sie Bilder auf Ihrer Website ein

Das Einbetten von Bildern und Grafiken stellt einen grundlegenden Aspekt der Webdesign-Praxis dar. Durch das <img>-HTML-Tag lassen sich Bilder problemlos in Ihre Website einfügen. Dieser Artikel zeigt Ihnen, wie Sie das HTML-Tag <img> nutzen, sodass Fotos richtig formatiert sind und Ihre Website attraktiv und anwenderfreundlich ist.

Zusätzlich bietet das <img>-Tag eine Reihe von Attributen, die eine individuelle Anpassung und Integration des Bildes ermöglichen. Diese Attribute können beispielsweise dazu genutzt werden, den Pfad zum Bild zu definieren, einen alternativen Text, also einen Alt-Text, anzugeben, wenn das Bild nicht geladen werden kann, oder die Darstellungsgröße des Bildes festzulegen.

HTML: Bild einfügen durch die Nutzung des <img>-Tags

Das HTML-Tag <img> ist für Sie vor allem dann wichtig, wenn Sie Bilder und Grafiken in Ihre Website integrieren möchten. Es fungiert dabei als eine Art Platzhalter und ermöglicht es, Bilder direkt in die Seite einzubetten. Der Pfad zur <img>-Datei wird dabei im scr-Attribut innerhalb von HTML angegeben.

Außerdem bietet das <img>-Tag ein weiteres wichtiges Attribut: die Ergänzung eines Alt-Attributs. Es ermöglicht Ihnen, einen sogenannten alternativen Text anzugeben, der angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen werden kann.

Dieses Attribut gibt Informationen über den HTML-Tag. Dies verbessert nicht nur die Zugänglichkeit und somit die Barrierefreiheit Ihrer Website, sondern hilft auch bei der Suchmaschinenoptimierung, da Suchmaschinen diesen Text nutzen, um den Inhalt des Bildes zu verstehen.

Das <img>-Tag ist mit einer Vielzahl von Bildformaten, wie JPEG, GIF und PNG, kompatibel. Daher ist das <img>-Tag ein unverzichtbares Werkzeug für die Gestaltung und Optimierung Ihrer Website.

Wie Sie ein Bild in HTML einfügen

Ein Bild in HTML einzufügen, ist ein einfacher Prozess, der nur wenige Schritte erfordert. Folgendes sollten Sie beachten:

• Öffnen Sie Ihren HTML-Code an der Stelle, an der Sie Ihr Bild einfügen wollen.
• Nutzen Sie dann den <img> Tag, um das Bild einzufügen. Dieser Tag signalisiert einem Webbrowser, dass ein Bild eingefügt wird beziehungsweise eingefügt werden soll.
• Benutzen Sie innerhalb des HTML-Tags <img> das sogenannte scr-Attribut, das steht für das englische source, um den Pfad bzw. die Quelle zum Bild anzugeben. Der Pfad kann zu einer Datei auf Ihrem lokalen Computer führen.
• Achten Sie darauf, dass Sie die Dateiendung Ihres Bildes in Ihrem Pfad angeben. Das bedeutet: Wenn Ihr Bild eine .jpg-, .png-, .gif- oder eine andere Dateiendung hat, muss diese in Ihrem Pfad aufgeführt werden.

Ein möglicher HTML-Bild-Tag könnte so aussehen:

HTML: <img>-Tag hat eigene Syntax

Unter der Syntax versteht man in der Programmiersprache den genauen Aufbau und das genaue Aussehen der Codes. Es entspricht in etwa der Grammatik und der Rechtschreibung und wiederholt sich systematisch. Auch bei <img>-Tags ist die Syntax einfach und übersichtlich. Der grundlegende Aufbau ist wie folgt:

Hier steht scr=”KaffeeMitMilch.png” für den Pfad zum Bild und alt=”Kaffee mit Milch in einer Tasse auf einem Tisch” stellt den alternativen Text dar.

Damit ein Bild korrekt auf Ihrer Website angezeigt wird, ist es sinnvoll, die Breite und Höhe des Bildelements zu definieren. Dabei helfen Ihnen die Attribute “width” und “height”:

Sie wollen die Ladezeit Ihrer Website optimieren? Dann ist der Einsatz des Attributs “loading” empfehlenswert. Wenn Sie den Wert “lazy” nutzen, wird Ihre Website erst dann das Bild laden, wenn der Nutzer oder die Nutzerin bis zu diesem Punkt auf der Seite scrollt. Dies kann insbesondere bei Websites mit vielen Bildern hilfreich sein. Mit dem Attribut “loading” ist der <img>-Tag folgendermaßen aufgebaut:

Sie sehen: Die Syntax des <img>-Tags in HTML ist sehr flexibel, da Sie die Darstellung Ihrer Bilder auf der Website nach den Bedürfnissen Ihrer Nutzenden anpassen und steuern können.

Überblick: Diese Attribute können Sie für Ihren HTML-<img>-Tag verwenden

Neben den Attributen „html img width“ und „html img height“ gibt es eine Reihe von weiteren Eigenschaften, die Sie mit dem <img>-Tag verknüpfen können:

Bitte beachten Sie, dass einige Attribute wie „html img align“, „html img border“, „html img center“, „html img hspace“, „html img longdesk“ und „html img vspace“ seit HTML 5 und HTML 5.1 als veraltet gelten und daher nicht mehr genutzt werden sollten.

<img>-Tag in HTML: Wie wird er responsive?

Um ein Bild in HTML responsive zu gestalten, also so, dass es sich automatisch an die Größen des Bildschirms oder des Tabs anpasst, müssen Sie zuerst das gewünschte Bild hinzufügen. Dies geschieht natürlich mit dem <img>-Tag. Anschließend können Sie diverse Stylesheets per CSS in HTML einbinden. In diesem Schritt ändern Sie die Parameter des Bildes, um es responsive zu gestalten.

Die Syntax, um ein Bild responsive zu gestalten, sieht folgendermaßen aus:

In diesem Beispiel wird im Attribut „html img style“ die Breite des Bildes auf 100 Prozent festgelegt und die Höhe automatisch an das Seitenverhältnis der Website angepasst.

Mittels eines internen Stylsheets können Sie die Klasse „.responsive“ für „html img“ definieren und anwenden. In einem HTML-Dokument kann das Foto, welches automatisch seine Größe verändern soll, wie folgt eingefügt werden:

Sie wollen die maximale Größe eines responsiven Bildes einschränken? Dann können Sie das Attribut “max-width” mit einem von Ihnen definierten Pixelwert verwenden. In dem folgenden Beispiel wird das Bild nie breiter als der Container, in dem es sich befindet:

HTML: Bild einfügen mit Link

Sie haben auch die Möglichkeit, Ihr Bildmaterial mithilfe eines Links zu implementieren. Der Link entspricht in diesem Fall einer Adresse zu einer im Internet gehosteten Bilddatei.

Um ein Bild per Verlinkung in Ihr HTML-Dokument einzufügen, müssen Sie den Befehl “a href=” einsetzen. Dieser ist der Unterlegung eines Textes mit einem Link ähnlich. Ihre Bildverlinkung ist dann wie folgt aufgebaut:

Mit dem ersten Teil <a href=”IhreVerlinkung.html”> wird die von Ihnen gewählte externe Seite verlinkt. An der Stelle von “IhreVerlinkung.html” setzen Sie die gewünschte URL ein.

Der hintere Abschnitt <img scr=”IhreBilder/IhrBild.png”/> wird für das Laden Ihres Bildes benötigt.

Natürlich gibt es Nutzer und Nutzerinnen, die bei ihren Webbrowsern Bilder absichtlich abschalten. In diesem Fall ist es noch wichtiger, dass Sie einen alternativen Text, der das Bild beschreibt, einsetzen. Durch alt=”IhreAlternativetextbeschreibung” wird den Besuchenden, die beispielsweise das Anzeigen von Bildern abgeschaltet haben sowie nicht oder nur schlecht sehen können, Ihrer Website eine Bildbeschreibung angezeigt.

Damit die Verlinkung funktioniert, müssen Sie diese noch mit dem Tag </a> schließen.

HTML: Bild einfügen aus Ordner

Um ein Foto aus einem anderen Ordner einzufügen, müssen sie den genauen Pfad angeben, der zu dem Bild führt. Dieser kann relativ oder absolut sein. Ein relativer Pfad ist, wie der Name schon verrät, relativ zur Position Ihrer HTML-Datei. In diesem Fall liegen die HTML-Dateien und die Elemente, die genutzt werden, auf demselben Server. Wenn Sie eine HTML-Datei haben und sich das Bild, das Sie einfügen möchten, also im selben Ordner befindet, könnte Ihr Pfad einfach der Dateiname des Bildes sein:

Wenn sich Ihr Bild in einem Unterordner des Ordners befindet, in dem sich auch Ihre HTML-Datei befindet, würde der Pfad den Namen dieses Unterordners enthalten. Befindet sich das Bild in einem Unterordner namens “Bildquelle”, würde der Pfad folgendermaßen lauten:

Beachten Sie dabei, dass in der Pfadangabe der Schrägstrich “/” und nicht der Rückstrich “\” verwendet wird, um Ordner voneinander zu trennen. Der Grund dafür ist, dass Webserver auf Unix, einem Mehrbenutzer-Betriebssystem, basieren, das Verzeichnisse mit einem Schrägstrich trennt.

Absolute Pfadnamen werden im Kontrast zu den relativen Quellen dann genutzt, wenn die verwendeten Dateien nicht auf dem eigenen Server liegen.

Fazit: Einfache Bildintegration mit dem HTML-<img>-Tag

Mit dem HTML-Tag <img> steht Ihnen ein leistungsfähiges Werkzeug zur Verfügung, um Bilder effizient in Ihre Website einzubinden und die Benutzererfahrung zu verbessern. Achten Sie immer auf die korrekte Verwendung der Attribute, um das bestmögliche Ergebnis zu erzielen. Experimentieren Sie mit den verschiedenen Attributen und Möglichkeiten, um die optimale Darstellung für Ihre speziellen Bedürfnisse zu finden. Und sind Sie sich mal nicht sicher: Inzwischen gibt es etliche Website Builder, die als All-in-One Tools daherkommen.

Titelbild: Cavan Images / iStock / Getty Images Plus