Einfügen von Bildern

Bilder einfügen ohne CSS

Zum Einfügen von Bildern gibt es in HTML das Tag <img> Dies ist eines der wenigen Tags, die nicht geschlossen werden müssen.
Hier wurde mit diesem Tag dasselbe Bild mehrere Male eingefügt. Sieht man genau hin, stellt man fest, das verschiedene Optionen angegeben wurden:

Das Attribut src gibt an, welche Bilddatei verwendet werden soll. In diesem Beispiel befindet sich die Datei in einem anderen Ordner als die HTML-Datei.
Tipp: Für den Anfang solltest Du die Bilddateien immer im selben Ordner speichern wie die HTML-Datei. Dann musst Du (einfacher als im Beispiel) nur den Dateinamen angeben. Hier wäre das dann nur Lokrum.jpg.
Was vielleicht nicht unmittelbar einleuchtet ist die Bedeutung des Attributs alt. Dieses kommt ins Spiel, falls beim Laden des Bildes ein Fehler auftritt. Zum Beispiel könnte die Bilddatei beschädigt sein oder einfach fehlen. Vielleicht kann - warum auch immer - der Browser das Format dieser Bilddatei nicht anzeigen. Es könnte aber auch sein, dass der Besucher der Seite die Anzeige von Bildern ausgeschaltet hat. In so einem Fall wird als Ersatz ein Alternativtext angezeigt.
Dieser Alternativtext wird übrigens auch verwendet, wenn sich Menschen mit einer Sehbehinderung die Seite durch einen Screen Reader vorlesen lassen. Daher gehört es zum guten Ton, dass man immer einen solchen Text angibt!

Schauen wir uns nun das Ergebnis im Browser an:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Übungsaufgabe

Füge in eine Deiner bereits erstellen HTML-Seiten ein Bild ein. Dazu kannst Du zum Beispiel ein Bild im Internet suchen und in Deinem HTML-Verzeichnis speichern.
Füge dasselbe Bild dann noch einmal mit einer festen Breite von 360px ein.
Schließlich füge es einmal so ein, dass es sich an die Fenstergröße anpasst und immer 50% der Fensterbreite einnimmt.

Bilder mit CSS gestalten

Hier wurde das uns bekannte Bild einmal eingefügt:

So wurde die Darstellung von Bildern in CSS gestaltet:

Darstellung im Browser:

Oftmals möchte man Bilder auf einer Seite zentriert darstellen. Das sollte man nicht mit margin-left versuchen. Wie man dies erreichen kann, sehen wir uns weiter unten an.

Übungsaufgabe

Gestalte mit CSS Dein eben eingefügtes Bild.

Bilder beschriften und zentrieren

Das Tag <figure> </figure> dient unter Anderem dazu, Grafiken oder andere Elemente (wie Videos) mit einer Beschriftung zu versehen. Diese wird mit <figcaption> </figcaption> gekennzeichnet. Mehrere Grafiken können zu einer Figure zusammengefasst werden.
Ein netter Nebeneffekt dieses Tags ist, dass wir ihn auch zum Zentrieren eines Bildes verwenden können, indem wir in CSS die Angabe text-align: center machen.

Hier wurden zwei Fotos zusammengefasst:

Hier sehen wir die CSS-Datei:

Das Resultat im Browser:

Übungsaufgabe

Modifiziere Deine Seite aus den letzten Aufgaben so, dass Du das Tag <figure> </figure> verwendest, um eine Beschriftung bei Deinem Bild hinzuzufügen.

Tipp zur Verwendung von Bilddateien

Um die Ladezeiten für Bilder auf Deiner Website klein zu halten, sollten die Auflösung der Bilder immer nur so groß sein wie nötig. D.h., wenn Du ein Bild nur in einer Größe von 240px Breite und 360px Höhe darstellest, dann sollte das Bild auch tatsächlich nur so groß sein. Auf keinen Fall solltest Du dann ein Bild mit hoher Auflösung und einer Dateigröße von möglicherweise mehreren MB verwenden!
Falls z.B. jemand mit einem Smartphone und mobilem Netz Deine Website besucht, könnte es passieren, dass er von den langen Ladezeiten genervt ist und Deine Website wieder verlässt. Außerdem gehen unnötig große Datein aufs Datenvolumen des Besuchers oder je nach Hosting-Vertrag auch auf Dein Datenvolumen als Website-Betreiber.

Es gibt übrigens verschiedene Dateiformate, die weniger Speicherplatz benötigen als andere Formate. Sehr berühmt ist das Jpeg-Format. Allerdings ist bei diesem die Qualität der Bilder nicht immer zufriedenstellend. In der Literatur wird das PNG-Format empfohlen. Auch hier sind die Dateien recht klein, während die Bildqualität nicht allzu sehr darunter leidet.

Fazit: Passe die Auflösung Deiner Bilder an und speichere sie als PNG-Dateien!