In HTML Bilder einfügen mit dem img-Tag

Wie du in HTML mit dem img-Tag Bilder einfügst. Was src und alt Attribute sind und wie du Pfade verwendest, um Bilder richtig anzuzeigen.Tags: | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

Eine Webseite ohne Bilder ist ziemlich langweilig. Dabei ist es in HTML sehr einfach, Bilder in deine Webseite zu verlinken und einzufügen. Alles, was wir dazu brauchen, ist ein einziges img-Tag und das src-Attribut. Und vielleicht noch ein wenig Hintergrundwissen über Pfade.

Aber der Reihe nach:

1. Wie wir in HTML Bilder einfügen können

Grundsätzlich ist es in HTML sehr einfach, Bilder einzufügen. Alles, was wir dazu brauchen, ist ein einzelnes <img>-Tag.

Wobei das nicht ganz stimmt. Ein <img>-Tag sagt dem Browser zwar, dass hier ein Bild sein soll, aber noch nicht welches Bild. Und um ihm das zu sagen, brauchen wir nun etwas Neues: Attribute. HTML-Attribute sind zusätzliche Informationen, die du zu einem HTML-Tag dazu schreibst. Ist es ein alleinstehendes HTML-Tag wie unser <img>-Tag, musst du sie nur in das einzelne hineinschreiben. Handelt es sich um ein öffnendes und ein schließendes Tag (z.B. beim <h1>-Tag für Überschriften), dann musst du die Attribute nur in das öffnende Tag schreiben.

1.1 In HTML Bilder von der Festplatte lokal einfügen

Das Ganze sieht dann beispielsweise für unser Bild so aus:

Hier kommt gleich ein Wal:
<img src="wal.jpg">

Das src-Attribut steht für „Source“, oder auf Deutsch „Quelle“ des Bildes – also welches Bild der Browser nun tatsächlich anzeigen soll.

In unserem Fall gibt es im selben Ordner in dem unsere index.html ist auch eine Bilddatei namens wal.jpg – die soll nun angezeigt werden.

Das Ergebnis sieht dann so aus:

HTML Bilder einfügen

Du kannst unsere wal.jpg natürlich gegen ein beliebiges Bild von dir ersetzen. Wichtig ist nur, dass die Bild-Datei im selben Ordner ist wie deine .html-Datei.

1.2 In HTML Bilder über einen Link einfügen

Du kannst in HTML Bilder nicht nur von deiner Festplatte bzw. aus dem gleichen Ordner einfügen und verlinken, sondern auch über Web-Adressen, sogenannten URLs.

Dazu musst du nur den Text der in den Doppelhochkommas beim src-Attribut steht entsprechend verändern, z.B. so:

Hier kommt gleich ein Wal:
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

Mit diesem Code wird z.B. das Google-Logo von der Google-Startseite verlinkt und angezeigt:

HTML Bilder einfügen über URLs

1.3 In HTML Bilder von einem anderen Ordner einfügen

Wenn dein Bild sich im gleichen Ordner befindet wie deine .html-Datei, kannst du wie weiter oben beschrieben einfach den Dateinamen im src-Attribut angeben, und es sollte funktionieren.

Aber was ist, wenn sich dein Bild in einem Unterordner befindet? Oder in einem übergeordneten Ordner?

Da kommen jetzt Pfade ins Spiel.

Weil die aber auch z.B. für Links wichtig sind, gibts dazu ein eigenes Tutorial.

2. Die Größe deines HTML-Bildes verändern und das wichtige Alt-Attribut

Die erste Frage, die du dir vermutlich stellen wirst, ist die, wie du die Größe deines Bildes nun verändern kannst.

2.1 Die Größe von HTML-Bildern verändern

Mittelfristig wirst du das im Normalfall mit Hilfe von CSS machen. Aber weil du vermutlich noch nicht so weit bist, hier erstmal die Schnell-Variante in HTML:

<img src="wal.jpg" width="400px">

Mit Hilfe von dem Attribut width kannst du festlegen, wie groß dein Bild sein soll. Die Einheit „px“ steht dabei für „Pixel“, also Bildpunkte.

Das Attribut height ermöglicht es dir, auch die Höhe des Bildes festzulegen. Wenn du das willst, fügst du es einfach vor der schließenden >-Klammer des img-Tags ein, genau wie das width-Attribut.

Allerdings ist es bei HTML-Bildern meistens keine gute Idee, beide Attribute (also width und height) gleichzeitig anzugeben. Gibst du nur eines an, wird das Seitenverhältnis (auch aspect-ratio genannt) beibehalten. Gibst du beide an, wird das Bild womöglich unschön verzerrt, und sieht dann z.B. bei unserem Google-Logo von vorher so aus:

HTML Bilder einfügen width und height gleichzeitig gesetzt verzerrt

Darum solltest du im Normalfall immer nur einen der beiden Attribute verwenden, und darum vertrauen, dass der Browser sich darum kümmert, dass das Seitenverhältnis des Bildes passt.

2.2 Das alt-Attribut und warum es von zentraler Bedeutung ist

Dein img-Tag kann auch noch ein sogenanntes alt-Tag bekommen. Das alt-Attribut hat zwei zentrale Bedeutungen, weswegen du es immer setzen solltest:

  • Suchmachinen versuchen über das alt-Attribut zu verstehen, was das Bild darstellt. Wenn dein Bild ein alt-Attribut hat das zur restlichen Webseite passt, hilft das deiner Suchmaschinen-Optimierung.
  • Blinde und sonstwie beeinträchtigte Menschen lassen sich das Alt-Tag über einen Screen-Reader vorlesen. So können sie zumindest erahnen, was auf den Bildern zu sehen ist, die sie nicht selbst sehen können.

Zudem dauert eine Kurz-Beschreibung über das alt-Attribut nicht sehr lange.

Viele Vorteile, kaum Aufwand – es zahlt sich wirklich aus!

3. Dein HTML Bild wird nicht angezeigt?

Wenn dein Bild nicht angezeigt wird, liegt das sehr wahrscheinlich an einem von drei Gründen:

  • Du hast einen Tippfehler: Überprüfe, ob du die korrekten Anführungszeichen verwendet hast!
  • Dein Bild existiert gar nicht: Stimmt der Name? Ist es wirklich eine .jpg-Datei, oder doch eine .png-Datei?
  • Dein Bild ist in einem anderen Ordner als du angegeben hast: Überprüfe deine Pfade!

 

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.