Grafiken einfügen

Unter dem Motto "Ein Bild sagt mehr als tausend Worte" sind Grafiken ein wesentlicher Bestandteil von Internet-Seiten um diese ansprechend zu gestalten.

Besonders bei der Gestaltung von Internet-Seiten gilt zu beachten, dass weniger oft mehr ist, weil es länger dauert, wenn viele oder große Grafik-Dateien geladen werden müssen. Das kann dazu führen, dass Personen, die sich für Ihre Seiten interessieren würden, ungeduldig werden, das Laden der Seiten abbrechen und sich anderen Seiten zuwenden, die schneller aufgebaut werden.

Speichern Sie Grafiken auf jeden Fall in der Größe ab, in der sie angezeigt werden sollen. So brauchen die Dateien am Server des Providers und in der Übertragung zum Betrachter Ihrer Seite jene nur Datenmenge, die für die optimale Darstellung des Bildes erforderlich ist. Wenn Se ein Bild, in einem anderen Maß darstellen lassen, als es abgespeichert ist, kommt es bei der Darstellung zu Verzerrungen und damit zu einer Verschlechterung der Bild-Qualität. Auf gar keinen Fall macht es Sinn, ein Bild vergrößert darstellen zu lassen.

Wenn Sie mit im Befehl, mit dem Sie die Grafik in die Internet-Seite einbinden, gleich die darzustellende Größe angeben, steuern Sie damit, dass sich die Seite beim Betrachter in folgender Weise aufbaut. Der Platz, den das Bild benötigt, wird für dieses freigehalten. Bevor dann nach und nach die Bilder aufgebaut werden, wird der Text angezeigt. Sie verhindern so, dass der Text umrangiert werden muss, wenn erst später am Rechner des Betrachters die Information einlangt, wieviel Platz die Bilder tatsächlich brauchen. Interessenten für Ihre Seiten können dann schon einmal den Text lesen und müssen nicht warten, bis alle Bilder geladen sind.

Im Internet finden Sie üblicherweise zwei Grafik-Typen:
Das GIF-Format (Graphics Interchange Format) eignet sichbesonders gut für die Darstellung von einfachen Grafiken mit wenigen Farb-Abstufungen.
Das JPEG-Format (Joint Photographic Expert Group) empfiehlt sich für aufwändigere Grafiken, mit vielen Farbverläufen (zB Fotos).
Im Zweifelsfall macht es Sinn, Grafik-Dateien in beiden Formaten zu erstellen und dann bei gleicher Bildqualität jene zu verwenden, die weniger Speicherplatz benötigt.

Seien sie auch bei der Auflösung sparsam. Für die Anzeige im Internet reicht eine Auflösung von 72 x 72 dpi. Bilder mit höherer Auflösung benötigen nur unnötigen Speicherplatz bringen aber keine Verbesserung für die Anzeige am Bildschirm.

Für die Einbindung von Grafiken in Ihre Internet Seiten gibt es folgende Möglichkeiten:

<img src="grafikdatei.gif">
  einbinden einer Grafik, die im gleichen Verzeichnis wie die aufgerufene Datei liegt, ohne zusätzliche Bedingungen
 
<img src="../verzeichnis/grafikdatei.jpg">
  Grafik liegt auf der gleichen Ebene in einem anderen Verzeichnis.
 
<img src="http://www.domain.at/bilder/grafikdatei.gif">
  einbinden einer Grafik von einer anderen Domäne aus dem Verzeichnis "bilder"
 
<img src="grafikdatei.gif" width="80" height="60">
  Einbinden einer Grafik, die in einer Breite von 80 Pixel und einer Höhe von 60 Pixel anzuzeigen ist. Wir empfehlen, diese Angabe auf jeden Fall anzuführen und das Bild in seiner tatsächlichen Größe anzuzeigen bzw. vorher das Bild in der darzustellenden Größe am Server abzuspeichern.
 
<img src="grafikdatei.gif" alt="Bildbeschreibung">
  Browser blenden den alternativen Text ein, wenn aus irgend einem Grund die Grafik nicht angezeigt werden kann. Diesen Text blenden die meisten Browsern auch ein, Sie den Mauszeiger auf die Grafik führen. wird.
 
<img src="grafikdatei.gif" border="2">
  Die Grafik wird mit einer Linienstärke von 2 Pixel eingerahmt. Mit 'border="0"' legen Sie fest, dass die Grafik ohne Rahmen angezeigt wird.
 
<img src="grafikdatei.gif" align="left">
  Grafik wird linksbündig ausgerichtet und rechts vom nachfolgenden Text umflossen.
 
<img src="grafikdatei.gif" align="right">
  Grafik wird rechtsbündig ausgerichtet und links vom nachfolgenden Text umflossen.
 
<p align="center">
   <img src="grafikdatei.gif">
</p>
  Grafikdatei wird in einem eigenen Absatz zentriert angezeigt und von keinem Text umflossen.
 
<img src="grafikdatei.gif" align="left">
Text, der die Grafik auf der rechten Seite umfließt<br clear=all>
Text, der zwingend unterhalb der Grafik steht
  Der Parameter 'clear=all' bei der Zeilenschaltung erzwingt, dass der weitere Text unterhalb der Grafik steht.
 
<img src="grafikdatei.gif" hspace="20">
  Neben der Grafik wird beidseits ein horizontaler Abstand von 20 Pixel eingehalten.
 
<img src="grafikdatei.gif" vspace="30">
  Oberhalb und unterhalb der Grafik wird ein vertikaler Abstand von 30 Pixel eingehalten.
 

Natürlich können Sie die einzelnen Parameter auch beliebig kombinieren.