Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

In HTML Bilder einfügen: <img>

Lerne, wie du in HTML Bilder einfügen, sie abrunden und sie ausrichten kannst. Außerdem: Absolute und relative Pfade verstehen.
(Letztes Update von Niklas Baumgärtler am 8.9.2020)

Am Ende wirst du:

  • Bilder in HTML eingefügt haben
  • Mit absoluten und relativen Pfaden umgehen können
  • Die Größe und Ausrichtung des Bildes ändern sowie runde Bilder einfügen können
  • Die Bedeutung der Bildoptimierung verstanden haben
Diese Einheit überspringen

Willkommen zurück zur vierten Lektion in diesem Kurs! Heute werden wir uns ausführlich damit beschäftigen, wie wir in unserer Webseite mit HTML Bilder einfügen können.

1. In HTML Bilder einfügen: das <img>-Tag

Das dazugehörige Tag <img> (kurz für “Image”, als Bild) haben wir ja schon in der letzten Lektion kurz kennengelernt. Das <img>-Tag gehört wie das <br>-Tag zur ersten Gruppe an Tags. Das bedeutet es steht alleine für sich und muss nicht durch ein </img>-Tag geschlossen werden.

Lass uns also nun ein <img>-Tag in unsere Webseite einfügen und unser ersten Bild anzeigen! Ich habe den Code vom letzten Mal etwas abgeändert, damit er wieder übersichtlicher wird. Du kannst aber auch in deinen bestehenden Code ein <img>-Tag einfügen, z.B. so (der folgende Code-Block muss irgendwo im <body>-Block deiner .html-Datei rein):

<h1>Das ist die Mega-Überschrift</h1>;
<p style='margin-top: 50px;'>Ich bin der Inhalt der Seite! Ich bin der erste Absatz.</p>
<h2>Ich bin auch noch wichtig und auf Ebene 2</h2>
<p style='margin-left: 40px; color: red;'>Ich bin noch ein Inhalt der Seite. Ich bin der zweite Absatz.</p>
<h2>Nach dieser Unter-Überschrift wird ein Bild zu sehen sein</h2>
<img>

Wenn wir uns nun das Ergebnis im Browser ansehen, sollte dieser uns ein Bild anzeigen. Hier findest du mein Ergebnis:

HTML Bilder einfügen

Die vollmundige Ankündigung der Überschrift ist nicht wahr geworden – kein Bild zu sehen! Aber warum eigentlich?

Der Browser steht vor dem Problem, dass er zwar verstanden hat dass er ein Bild anzeigen soll, aber er weiß noch nicht welches! Wir müssen ihm das erst noch mitteilen, bevor er es anzeigen kann. Dazu braucht unser <img>-Tag noch das entsprechende Attribut, und dieses heißt “src” (Source, Englisch für “Quelle”).

2. In HTML Bilder einfügen – das Source-Attribut

Wie wir in der letzten Lektion bereits besprochen haben, fügt man Attribute direkt nach dem Namen des Tags innerhalb der <>-Klammern des Tags nach einem Leerzeichen ein. Wenn wir annehmen dass unsere Bild-Datei “bild2.jpg” heißt und sich im selben Ordner befindet als unsere index.html, dann würde unser <img>-Tag nun so aussehen:

<img src='bild2.jpg'>

Nun weiß der Browser, welches Bild er anzeigen soll, und zeigt es auch korrekt an: HTML Bilder einfügen

Als nächstes werden wir nun einige Möglichkeiten kennenlernen, wie wir das Aussehen unserer Bilder verändern können.

3. HTML Bilder einfügen, Styling: width, height, border-radius, text-align

So, nun wissen wir, wie wir in HTML Bilder einfügen können. Aber was ist, wenn uns die Größe des Bildes nicht so recht passt? Dann hilft uns wie schon in der letzten Lektion das Style-Attribut, mit dem wir dem Bild CSS-Befehle zuweisen können.

3.1 Länge und Höhe des Bildes verändern

<img src='bild2.jpg' style='width: 300px; height: 300px;'>

Der CSS-Befehl “width” legt dabei die Breite des Bildes fest, der Befehl “height” die Höhe. “Px” steht wie schon in der letzten Lektion erwähnt für die Einheit “Pixel”, also Bildpunkt. In diesem Fall haben wir also unserem Bild eine Abmessung von 300×300 Pixeln verpasst, es also quadratisch gemacht.

Nicht vergessen: Nach jedem CSS-Befehl muss ein Strichpunkt kommen, außer du hast nur einen einzigen CSS-Befehl verwendet.

3.2 Das Bild in der Mitte ausrichten

Wenn wir nun unser Bild mittig ausrichten wollen gibt es dazu auch einen CSS-Befehl, nämlich “text-align: center;”. Leider funktioniert dieser mit unserem <img>-Tag alleine nicht (probiere es gerne aus).

Wenn wir aber unser <img>-Tag innerhalb eines <p>-Blocks (also zwischen <p> und </p>) platzieren, dann können wir unserem <p>-Block den CSS-Befehl text-align: center; zuweisen. Dann wird alles was sich in dem Absatz befindet zentriert ausgerichtet – also auch unser Bild!

3.3 Unser Bild abrunden oder auch ganz kreisförmig machen

Unser Bild hat nun die richtige Größe die wir haben wollen, und zentriert ist es auch. Aber falls du das Schreibprogramm Word benutzt hast du vielleicht schonmal das Bild-Formatierungs-Tool verwendet dass dir Bilder automatisch kreisförmig macht. Wäre es nicht ziemlich cool wenn wir das auch tun könnten? Genau das erledigt dir der nächste CSS-Befehl den wir lernen werden: border-radius.

Dieser Befehl rundet den Tag auf den er angewendet wird an den Ecken ab, und zwar um so viele Pixel wie man angibt. Um ein Bild an allen Ecken um 10 Pixel abzurunden würdest du beispielsweise schreiben:

<img src='bild2.jpg' style='border-radius: 10px;'>

Wenn wir nun genau wissen wie groß ein Bild ist, z.B. 400×400 Pixel, dann müssten wir dieses Bild nur um jeweils 200 Pixel an jeder Ecke abrunden und bekommen einen Kreis (oder eine Ellipse falls das Ursprungsbild nicht quadratisch ist).

Nur müssen wir dazu immer im Vorhinein wissen wie groß das Bild in Pixel werden könnte, und falls sich am Bild etwas ändert, müssten wir das ebenso händisch umändern. Da ist ein Programmierer zu bequem dazu, der denkt sich etwas Besseres aus: die Einheit %.

Anstatt dir auszurechnen wie viele Pixel der border-radius haben darf, kannst du statt der px-Angabe auch einfach eine %-Angabe verwenden. 50% etwa bedeutet dann dass jede Ecke bis zur Hälfte der Diagonale abrunden wird, was zu einem Kreis führt, egal wie viele Pixel das Bild dann hat. Weniger Arbeit, der Programmierer ist entzückt 🙂

Hier noch einmal ein ganzer Codeblock zum ausprobieren:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ich bin der schönste Titel der Welt!</title>
</head>
<body>
<h1 style='text-align: center;'>Das ist unser Schmetterling!</h1>
<img src='bild2.jpg' style='width: 300px; height: 300px;border-radius: 50%;'>
</body>
</html>

Und das Ergebnis sieht dann bei mir so aus:

HTML Bilder einfügen 3

Natürlich gibt es noch viele weitere Möglichkeiten Bilder zu stylen, aber das soll uns einmal fürs erste genügen.

4. HTML Bilder einfügen: Einige Worte zu Dateigrößen und Optimierung

Wenn du wie die meisten Menschen keine große Lust hast, Bilder mit Hilfe von Grafikprogrammen auf die jeweils richtige Größe und Auflösung zusammenzuschrumpfen, wirst du dich wahrscheinlich darüber freuen, dass man das auch mit CSS lösen kann. Nur ist das so nicht ganz korrekt, denn du musst mehrere Dinge beachten:

  • Wenn du Bilder mit CSS vergrößerst oder verkleinerst, kann es zu Verzerrungen kommen, wenn das Verhältnis des Ursprungs-Bildes nicht mit deinen CSS-Angaben zu Breite und Höhe zusammenstimmen.
  • Wenn du ein Bild mit Hilfe von CSS kleiner anzeigst als es ist, wird beim Laden der Webseite trotzdem das große Bild heruntergeladen (nur eben verkleinert angezeigt). Das führt dazu, dass deine Webseite womöglich unnötig langsam lädt, weil viele große Bilder geladen werden, von denen der Besucher nichts hat, weil er sie ohnehin nicht sehen kann.
  • Längere Ladezeiten aufgrund unpassenden Bildgrößen können dazu führen, dass Google und anderen Suchmaschinen deine Webseite als nicht so toll ansehen und du daher nicht so gut gefunden wirst.

Daher macht es in den meisten Fällen Sinn, Bilder entsprechend ihrer später auch genutzten Größe zu optimieren. Das kann man “händisch” mit jeder einzelnen Datei tun, oder sich von einigen automatisierten Programmen unterstützen lassen.

Wie letzteres genau funktioniert, würde an dieser Stelle zu weit führen. Aber es ist wichtig dass du verstehst dass die Bild-Größe eines Bildes mit der tatsächlich angezeigten Bildgröße übereinstimmen sollte, und auch warum. Damit du dir gleich von Anfang an angewöhnst darauf zu achten.

Und nun kommen wir zu einem weiteren wichtigen Thema: den Pfaden. Diese helfen dir, Ordnung in größere Webseiten-Projekte zu bringen.

5. In HTML Bilder einfügen – den richtigen Pfad finden

In unserem ersten Test-Beispiel haben wir uns es vergleichsweise einfach gemacht: Die Bild-Datei ist im selben Ordner zu finde wie unsere index.html Source-Code-Datei.

Wenn unsere Webseite aber nun wächst und mit der Zeit mehrere HTML-Dateien und/oder auch Bilder verwendet, dann wird unser Ordner, in dem alles gespeichert ist, rasch sehr unübersichtlich.

Da wird es früher oder später sinnvoll sein, Unter-Ordner zu verwenden, um beispielsweise alle Bilder dort abzuspeichern. Ein häufig benutzer Name für einen solchen Bilder-Unterordner ist z.B. “img” (für Image, Bilder). In diesem Ordner können wir all unsere Bilder abspeichern, da behalten wir besser die Übersicht.

Wenn du nun aber z.B. einen Unter-Ordner mit dem Namen “img” erstellst und unsere bild2.jpg-Datei dorthin verschiebst, dann werden plötzlich die Bilder unserer Webseite nicht mehr richtig angezeigt, wenn du ansonsten im Source-Code alles gleich lässt. Warum ist das so?

Das ist deswegen so, weil der Browser von sich aus immer nur im selben Ordner nachschaut, ob dort eine Bild-Datei mit dem angegebenen Namen (in unserem Fall bild2.jpg) zu finden ist. Er ist leider nicht schlau genug, um auch in Unter-Ordnern nachzusehen. Deswegen müssen wir ihm helfen und ihm den richtigen Weg weisen. Und das bringt uns zum Thema der Pfade.

5.1 Pfade, die auf einen Unterordner zeigen

Nehmen wir an, wir haben wie oben beschrieben einen Unter-Ordner namens “img” erstellt und unsere Datei bild2.jpg dorthin verschoben. Damit der Browser das Bild dann immer noch finden kann, müssen wir das src-Attribut unseres <img>-Tags entsprechend anpassen. Das Ganze sieht dann so aus:

<img src='./img/bild2.jpg'>

Diese Pfad-Angabe sagt dem Browser mit Hilfe des ersten “./” dass er im aktuellen Ordner (also dem Ordner, der in unserem Fall die index.html-Datei enthält) starten soll. Dann soll er in den Unterordner “img” gehen, und dort nach der Datei bild2.jpg suchen.

Wenn wir im Unterordner “img” noch einen Unterordner mit dem Namen “klein” hätte,n in dem sich dann z.B. eine Datei mit dem Namen bild3.jpg befindet, dann würden wir dem Browser das so mitteilen:

<img src='./img/klein/bild3.jpg'>

Wie du siehst, kann man beliebig “tief” in Unter-Ordner “hineinlaufen”, das Ganze würde auch z.B. mit einer Unter-Ordner-Tiefe von 15 funktionieren (wobei das in der Praxis kaum jemals vorkommt).

Vielleicht fragst du dich jetzt, ob man denn den Anfang des Pfads, also das “./” auch ohne Unter-Ordner verwenden kann, wenn also die Bild-Datei im selben Ordner ist wie unserer .html-Datei, also so:

<img src='./bild2.jpg'>

Die Antwort ist: Ja, auch das würde funktionieren. Aber weil das Ergebnis genau gleich wäre als wenn man das “./” am Anfang weglassen würde und Programmierer im Regelfall eher bequeme Menschen sind, wird das anfängliche “./” im Normalfall einfach weggelassen.

5.2 Pfade, die auf übergeordnete Ordner zeigen

Was aber ist, wenn sich das Bild nicht im selben Ordner oder einem Unterordner befindet, sondern in einem Ordner über dem, wo sich die index.html befindet, die der Browser gerade anzeigt? Dann sieht der Pfad so aus:

<img src='../bild2.jpg'>

Der zweite Punkte vor dem Schrägstrich sagt dem Browser, dass er nicht im gleichen Ordner anfangen soll zu schauen, sondern im übergeordneten Ordner.

Und wenn sich die Bild-Datei gleich zwei oder drei Ordner über der gerade im Browser angezeigten index.html befindet?

Richtig, das sieht dann so aus (im Falle dass man 3x in der Ordner-Hierarchie “hinauf” wechseln muss):

<img src='../../../bild2.jpg'>

Ebenso wie man beliebig “tief” in eine Unterordner-Struktur “hineinwandern” kann, kann man sich auch beliebig weit “nach oben” jeweils in Richtung des übergeordneten Ordners bewegen.

Man kann die beiden Richtungen der Bewegung aber auch kombinieren – das bringt uns zu den gemischten Pfaden.

5.3 Gemischte Pfade

Nun kann es auch sein, dass eine Bild-Datei sich nicht im gleichen Ordner, nicht in einem Unterordner und auch nicht in einem Ordner direkt darüber befindet. Zum Beispiel könnte eine Ordner-Struktur so aussehen (Ordner-Namen sind jeweils groß geschrieben):

  • PRODUKTE
    • ELEKTRONIK
      • FOTOS
        • bild2.jpg
    • WEB
      • SEITEN
        • index.html

In diesem Fall müsste der Browser ausgehend von der index.html (unserem Startpunkt des Pfades) zuerst einmal ganz hinauf gehen um zum ganz übergeordneten Ordner “Produkte” zu kommen, und dann tief in die Struktur vom Ordner Elektronik bis zum bild2.jpg (unserem Ziel des Pfades). Versuche es doch mal, ob du den richtigen Pfad auf ein Blatt Papier schreiben kannst, bevor du weiterliest, um das Ergebnis zu kontrollieren!

Hier ist das Ergebnis:

<img src='../../ELEKTRONIK/FOTOS/bild2.jpg'>

Zur Erklärung, wie der gemischte Pfad zustandekommt:

  1. Die Datei index.html befindet sich im Ordner SEITEN.
    Aktueller Pfad: ‘./’
  2. Einmal rauf (../) bringt uns in den Ordner WEB.
    Aktueller Pfad: ‘../’
  3. Noch einmal rauf in den Ordner PRODUKTE.
    In diesem finden sich nun 2 Ordner: ELEKTRONIK und WEB
    Da sich unsere Bild-Datei in einem Unterordner von ELEKTRONIK befindet, müssen wir als  nächstes dort hinein
    Aktueller Pfad: ‘../../’
  4. Wir gehen in den Unterordner ELEKTRONIK durch ein /ELEKTRONIK
    Aktueller Pfad: ‘../../ELEKTRONIK/’
  5. Wir gehen in den Unterordner FOTOS durch ein /FOTOS
    Aktueller Pfad: ‘../../ELEKTRONIK/FOTOS/’
  6. Wir fügen den Namen des Bildes hinzu
    Aktueller Pfad: ‘../../ELEKTRONIK/FOTOS/bild2.jpg’

Das Ganze mag jetzt anfangs noch etwas verwirrend wirken. Aber sobald du das ein paar Mal angewendet hast, wird es dir nicht mehr schwer fallen.

6. Relative, absolute und URL-Pfade

Beim Thema Pfade gibt es ähnlich wie bei den HTML-Tags zwei Arten. Bei den Pfaden heißen die beiden Arten absolute und relative Pfade.

6.1 Relative Pfade

Wir haben uns gerade viel mit relativen Pfaden beschäftigt – das sind jene, bei denen es einen Unterschied macht, von welchem Ort in der Ordner-Struktur wir ausgehen. Wenn wir ein Bild mit einem src-Attribut von “bild2.jpg” haben und das Bild an einen anderen Ort verschieben, dann wird es nicht mehr angezeigt. Das gleiche passiert aber auch, wenn wir die HTML-Datei an einen anderen Ort verschieben. Der Pfad zum Bild ist relativ zur Ausgangsposition der HTML-Datei angegeben – deswegen auch der Name “relative Pfade”.

Der Vorteil relativer Pfade ist, dass sie meistens weniger lang sind als absolute Pfade. Außerdem funktionieren sie auch dann noch, wenn irgendein übergeordneter Ordner umbenannt wird.

Der Nachteil ist, dass sie etwas komplizierter zum Mitdenken sein können.

6.2 Absolute Pfade

Im Unterschied dazu gibt es auch absolute Pfade. Diese gehen von einem unverschiebbarem Startpunkt aus, nicht von der Position einer HTML-Datei. Auf einem Windows-Computer ist so ein unverschiebbarer Startpunkt z.B. deine Festplatte, oft mit dem Buchstaben C gekenntzeichnet. Vielleicht hast du schonmal einen Pfad gesehen, der so oder so ähnlich ausgesehen hat: “C:\Program Files\FileZilla\FileZilla.exe”?

Wenn ein anderes Programm die FileZilla.exe über diesen Pfad aufruft, ist es völlig egal, wo sich die Datei befindet, von der aus auf die FileZilla.exe zugegriffen wird. Sie findet immer ihr Ziel, solange die FileZilla.exe nicht verschoben wird.

Der Vorteil absoluter Pfade ist, dass man viel weniger darüber nachdenken muss wo sich Dateien befinden und welche Auswirkungen das aufeinander haben kann.

Der Nachteil ist, dass man ziemlich viel Arbeit hat, wenn sich dann z.B. in einem übergeordneten Ordner etwas am Namen ändert. Dann muss man nämlich jeden einzelnen Pfad im Programm-Code entsprechend abändern. Außerdem sind die Pfade länger zum Schreiben.

Aber Achtung: In HTML kannst du nicht die in Windows üblichen Pfad-“Striche” benützen die von links oben nach rechts unten gehen (\), sondern musst die verwenden, die in die andere Richtung gehen (/). Das bringt uns zu einer weiteren Unter-Art der Pfade – den URL-Pfaden.

6.3 URL-Pfade

URL-Pfade sind Pfade, die auf eine sogenannte Domain bzw. Unterseiten der Domains zeigen. Domains sind Webseiten-Adressen wie z.B. www.bunterrichten.com oder www.google.com. Eine Unterseite einer Domain ist zum Beispiel diese Seite hier, die du gerade liest. Du findest die genaue Adresse der Unterseite, in dem du die Adresszeile deines Browsers betrachtest.

Du kannst statt relativen Pfaden die auf dein Datei-System (oder später das deines Web-Servers) zeigen auch (absolute) URL-Pfadangaben benutzen. So kannst du auf deine eigenen Unterseiten/Bilder/etc. verweisen (z.B. ) oder auch auf Bilder die gar nicht von deiner Webseite stammen sondern von einer anderen, z.B. so:

<img src='https://www.bunterrichten.com/wp-content/uploads/2020/05/bild2.jpg'>

Wenn du den obigen Code in deine Webseite einfügst, dann sollte dir das Bild angezeigt werden. Du kannst also – rein technisch gesprochen – auch Bilder aus dem Internet in deine eigene Webseite einfügen.

Allerdings musst du dabei darauf achten, dass du auch das Recht hast, diese Bilder zu verwenden. Sonst drohen empfindliche Strafen wegen Verletzung von Bildrechten.

Für Test-Zwecke, und vor allem wenn deine Webseite sich nur auf deinem Computer befindet und noch nicht im Internet, brauchst du dir darüber jedoch noch keine Gedanken zu machen.

Profi-Tipp: Die Begriffe URL und Domain wird dir noch öfter unterkommen, diese solltest du dir merken. URL bedeutet ausgeschrieben “Uniform resource locator”, manchmal wird auch die Abkürzung URI verwendet. Was es ausgeschrieben bedeutet, brauchst du dir nicht zu merken, aber dass eine URL das Gleiche wie eine URI ist, und beides eine Art “Ortsangabe” ist, das schon.

So, damit sind wir auch schon wieder am Ende mit dieser Lektion. In der nächsten geht es weiter mit der Verbindung verschiedener Einzelseiten zu einer größeren Webseite – wir werden lernen, wie man Links verwendet.

Bis zum nächsten Mal!

Du hast nun:

  • Bilder in HTML-Code eingefügt
  • Mit absoluten und relativen Pfaden umzugehen gelernt
  • erfasst wie du die Größe und Ausrichtung von Bildern ändern kannst
  • Die Bedeutung der Bild-Optimierung für Webseiten verstanden
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren