Bilder auf Webseiten einfügen

Auf den meisten Webseiten werden Bilder und sonstige Grafiken eingefügt. Sie verleihen einer Webseite Leben und Informationen können oftmals mit Grafiken visuell besser dargestellt werden als mit Text. Das Einfügen von Bildern gestaltet sich für den HTML-Anfänger allerdings etwas kompliziert. Die meisten Fehler tauchen dann auf, wenn man die lokal erstellte Webseite auf den Server hochlädt, die Webseite betrachtet und feststellt, dass das Bild nicht angezeigt wird. Es ist natürlich nicht schwierig, mit HTML Bilder in eine Webseite einzufügen, wenn zunächst das Verständnis dafür da ist, wie Bilder auf Webseiten eingefügt werden.

Genau genommen, werden Bilder gar nicht fest in die Webseite eingebunden. Damit ist gemeint, dass technisch gesehen die Webseite und das Bild keine feste Einheit darstellen. Es ist eher so, dass im Quellcode der Webseite lediglich angegeben wird, dass an der entsprechenden Position ein Bild angezeigt werden soll und über eine Pfadangabe wird mitgeteilt, wo sich das Bild befindet. Die Webseite und das Bild sind somit zwei verschiedene Dateien. Man könnte z.B. genausogut nur die Bilder von einem Webserver runterladen, ohne die Webseite aufzurufen.

Wenn man eine Webseite aufruft, dann läuft es grob betrachtet technisch wie folgt ab. Zunächst wird die Webseite vom Server ausgeliefert und runtergeladen. Der Browser verarbeitet den HTML-Code der Webseite. Dabei wird festgestellt, dass die Webseite einen Pfad zu einem Bild enthält. Daraufhin versucht der Browser, das Bild nachzuladen und an der entsprechenden Stelle visuell darzustellen. Das ist auch der Grund, warum im Browser zuerst immer die Texte und etwas zeitverzögert die Bilder dargestellt werden. Ist die Pfadangabe korrekt, bzw. ist das Bild über das Internet erreichbar, so wird das geladen und an der entsprechenden Position eingeblendet. Kann das Bild nicht runtergeladen werden, erscheint im Browser statt des Bildes ein rotes X bzw. ein anderes Symbol, das anzeigt, dass das Bild nicht vorhanden ist. Hierfür kann es verschiedene Gründe geben.

Bild in Webseite einfügen

Mögliche Gründe, wenn Bilder nicht angezeigt werden

Hat man eine Webseite mit einem Bild erstellt und das Bild wird nicht angezeigt, so kann das verschiedene Ursachen haben. Einige Gründe, die möglicherweise vorliegen:

  • Kein Bild auf dem Server: Häufige Fehlerursache insbesondere bei Personen, die beginnen, Webseiten zu erstellen. Man lädt die Webseite hoch, das Bild jedoch nicht. Da Webseite und Bild zwei separate Dateien sind, reicht es nicht aus, nur die Webseite hochzuladen. Auch das Bild muss hochgeladen werden, damit es über das Internet geladen und im Browser dargestellt werden kann.
  • Falsche Pfadangabe zum Bild: Ebenfalls eine häufige Fehlerursache. Es reicht nicht aus, nur das Bild irgendwo auf dem Server hochzuladen. Der Pfad zum Bild muss von der Position der Webseite aus gesehen, stimmen. Wenn man z.B. in die Webseite ein Bild mit einer bloßen Pfadangabe mein-bild.jpg einbindet, dann muss das Bild sich im selben Ordner befinden wie die Webseite. Denn, es wurden keinerlei Ordnerangaben gemacht. Wenn sich das Bild z.B. nicht im selben Verzeichnis wie die Webseite befindet, sondern in einem Unterordner mit dem Namen ordner1, dann muss bei der Pfadangabe auch ordner1/mein-bild.jpg angegeben werden.
  • Absolute lokale Pfadangabe zum Bild: Mit der falschen Pfadangabe kann man sich sogar selbst austricksen. Denn, wenn man z.B. die Webseite auf dem lokalen Rechner mit einem Windows-Betriebssystem erstellt hat und bei der Pfadangabe C:\Meine-Dateien\Webseite\ordner1\mein-bild.jpg angegeben hat und das Bild auf der Webseite angezeigt wird, die Webseite mit den Ordnern auf den Server hochgeladen wird, dann kann es durchaus sein, dass das Bild beim Aufruf der Webseite über das Internet auf Ihrem Rechner angezeigt wird, bei allen anderen Rechnern jedoch nicht. Denn, in dem Fall würde der Browser bei allen Rechnern, von dem die Webseite aufgerufen wird, versuchen, das Bild von C:\Meine-Dateien\Webseite\ordner1\mein-bild.jpg zu laden. Unter diesem Pfad ist das Bild jedoch nur auf Ihrem Rechner vorhanden, bei allen anderen Rechnern gibt es das Bild auf den lokalen Rechnern nicht, evtl. haben sie nicht einmal die genannten Ordner. Die Pfadangabe muss sich daher immer auf die Ordnerstruktur auf dem Server beziehen. Und im Internet laufen die meisten Webserver unter einem Linux-Betriebssystem und da gibt es keine Festplatte mit dem Laufwerksbuchstaben C:\ und die Ordnerstruktur auf Linux-Rechnern ist sowieso eine ganz andere.
  • Pfadangabe auf dem Server, der vom Internet nicht erreichbar ist: Wenn man Speicherplatz auf einem Server mietet, dann erhält man vom Serverbetreiber einen bestimmten Ordner, in dem die Webseiten mit den Bildern abgelegt werden können, z.B. /var/vhosts/example.com/httpdocs/. Ein Aufruf Ihrer Domain führt in dem Fall immer zum Ordner httpdocs. Das ist quasi die oberste Ebene, die vom Internet erreichbar ist. Alle weiteren Unterordner können von dieser Ebene aus über das Internet erreicht werden, jedoch nicht die übergeordneten Ebenen. Legt man das Bild z.B. unter /var/vhosts/example.com ab und gibt im Quellcode diesen Pfad an, dann ist die Pfadangabe technisch gesehen zwar richtig, man kann aber über das Internet nicht darauf zugreifen. Denn, die Domain führt immer zum Ordner httpdocs und man kann nur auf diesen Ordner sowie auf die Unterordner zugreifen, die sich unterhalb von httpdocs befinden. Man sollte generell nicht mit absoluten Pfaden arbeiten, sondern nur mit relativen und der Pfad muss immer vom Stammordner gesehen, z.B. httpdocs, erreichbar sein bzw. darunter liegen.
  • Groß- und Kleinschreibung bei den Ordner- und Bildernamen: Auf Windows Rechnern wird nicht zwischen Groß- und Kleinschreibung unterschieden. Das bedeutet, wenn man auf das Bild unter C:\Meine-Dateien\Webseite\ordner1\mein-bild.jpg zugreifen möchte, dann kann man genausogut mit C:\Meine-Dateien\Webseite\Ordner1\Mein-Bild.JPG darauf zugreifen. Die meisten Server im Internet sind jedoch Linux-Rechner und auf Linux-Rechnern sind mein-bild.jpg und Mein-Bild.jpg zwei verschiedene Dateien. Wenn auf die genaue Bezeichnung der Grafik nicht geachtet wurde, kann es durchaus passieren, dass das Bild nicht geladen wird. Man sollte sich generell angewöhnen, Bildernamen nur in Kleinbuchstaben anzugeben. So muss man sich nicht über die Groß- und Kleinschreibung Gedanken machen.
  • Umlaute, Leer- und Sonderzeichen bei Ordner- und Bildernamen: Ähnlich verhält es sich mit Umlauten, Leer- und Sonderzeichen. Unter Windows werden Bilder, die Umlaute, Leer- oder Sonderzeichen im Namen haben, problemlos dargestellt. Unter Linux-Rechnern jedoch nicht, weil diese als Bestandteil eines Dateinamens nicht vorgesehen sind. Es ist zwar technisch möglich, dass auch Linux-Rechner damit umgehen können. Hierfür braucht man aber tiefer gehende Kenntnisse über Serverkonfiguration und der Server muss dementsprechend konfiguriert worden sein. Daher sollte man bei den Dateinamen generell auf Umlaute, Leer- und Sonderzeichen verzichten und nur normale Buchstaben, Zahlen und den Bindestrich verwenden. Hat man z.B. ein ä im Dateinamen, ändert man es in ae um. Statt Leerzeichen kann man Bindestriche verwenden.
  • Falsche Berechtigungen bei den Ordnern oder Bildern: Auf Linux-Rechner gibt es ein Berechtigungssystem, der es erlaubt oder nicht, dass ein Bild bzw. eine Datei gelesen werden kann. Für jede Datei gibt es einen Eigentümer und jeder Eigentümer befindet sich in einer Gruppe. Für jede Datei kann man Schreib-, Lese- und Ausführungsrechte vergeben. Wenn z.B. die Leserechte nicht richtig gesetzt sind, kann es passieren, dass ein Bild nicht angezeigt wird.

HTML-Code zum Einfügen eines Bildes

Ein Bild wird mit dem Befehl <img> in die Seite eingebunden. Dabei benötigt der Befehl zumindest noch eine Zusatzangabe, nämlich den Pfad zum Bild. Man muss also zusätzlich noch angeben, welches Bild man einfügen möchte. Hierfür wird der Befehl <img> erweitert. Der Pfad wird mit dem Zusatz src="..." innerhalb der Anführungszeichen angegeben und das kommt von Source, was auf Deutsch Quelle bedeutet und womit quasi die Bildquelle gemeint ist.. Die Syntax zum Einfügen eines Bildes wäre somit wie folgt:

Syntax zum Einfügen eines Bildes

Bindet man in eine Webseite ein Bild ein, so kann man nicht nur den Pfad zum Bild angeben, sondern weitere optionale Angaben. Diese werden getrennt durch ein Leerzeichen eingegeben. Die Syntax mit optionalen Angaben wäre somit wie folgt:

Syntax mit optionalen Angaben

Die Werte für die optionalen Angaben werden nach den folgenden Schlüsselwörtern und dem Gleichheitszeichen innerhalb von Anführungszeichen angegeben. Folgende optionale Angaben kann man zu einem Bild machen:

  • alt: Auch Alternativtext genannt. Ist dafür gedacht, dass blinde Menschen, die über einen Screenreader eine Webseite lesen und das Bild nicht betrachten können, einen alternativen Text statt des Bildes lesen können. Hier sollte man also einen beschreibenden Text für das Bild einfügen.
  • title: Bilder können auch mit einem Titel versehen werden. Der Titel zählt zu den Universalattributen. Wenn man mit dem Mauszeiger über ein Bild stehenbleibt, so wird der Titel als Tooltip angezeigt.
  • height: Die Höhe des Bildes. Dadurch wird der Seitenaufbau beschleunigt, da Bildhöhe nicht ermittelt werden muss.
  • width: Die Breite des Bildes. Hierfür gilt dasselbe wie für die Höhe.

Grundsätzlich sollte man es sich angewöhnen, die Originalgröße eines Bildes anzugeben. Es ist zwar möglich, ein z.B. 1000 Pixel breites Bild in der Breite von z.B. 200 Pixel darzustellen. Die Höhen- und Breitenangaben sind jedoch nicht dafür da, um Bilder verkleinert darzustellen. Denn, selbst wenn ein 1000 Pixel breites Bild als ein 200 Pixel breites Bild dargestellt wird, so wird trotzdem die gesamte Dateigröße des 1000 Pixel breiten Bildes geladen. Lediglich die visuelle Darstellung ändert sich. In dem Fall sollte man mit einem Bildbearbeitungsprogramm das Bild auf die Breite von 200 Pixel verkleinern.

Ein kompletter Beispielcode inkl. den Angaben für die Attribute:

<img src="ordner1/mein-bild.jpg" alt="Mein tolles Auto" width="200" height="200">

Wenn man auf den Webseiten Bilder einbindet, dann entsteht häufig der Wunsch, das Herunterladen von Bildern zu deaktivieren. Man kann zwar mit JavaScript die rechte Maustaste deaktivieren und den Download eines Bildes erschweren. JavaScript kann jedoch bei allen Browsern deaktiviert werden. Somit hätte diese Barriere keinen effektiven Schutz. Grundsätzlich gilt, dass man Bilder, die über das Internet zugänglich sind, auch herunterladen kann. Man kann lediglich beim Hotlinking Bilder schützen. Beim Hotlinking geben andere Webseitenbetreiber als Pfad für die Bilder einen Pfad von einem anderen Webserver an. Das kann serverseitig über die Datei .htaccess unterbunden werden. Man kann die Datei .htaccess so einstellen, dass wenn ein Bilderdownload über eine andere Webseite erfolgt, der Server das Bild nicht ausliefert und so das Hotlinking verhindert.