StarHTML HTML-Wissen Bilder einfügen und formatieren

Bilder einfügen und formatieren


Bilder auf Internet-Seiten sind immer GIF- oder JPEG-Dateien (Dateiendung .gif oder .jpg/.jpeg). Andere Formate werden von den meisten Browsern nicht verstanden.

Einfügen von Bildern


Bilder werden an der gewünschten Stelle mit <img src="*"> eingebunden (img = image = Bild, src = source = Quelle). Anstelle von * geben Sie die Bild-Datei an:

Quelle des Bildesdas müssen Sie einsetzenBeispiel
auf fremden Server [Adresse des Bildes mit "http://"]
im selben Verzeichnis
des Servers
[Dateiname]
Datei im Ober-
Verzeichnis des Servers
../[Dateiname] ../logo.gif
in einem Unterverzeichniss [Verzeichnis]/[Dateiname] bilder/logo.gif

Im Fließtext sieht das so aus:
Das Bild setzt auf der Zeile auf und fügt so einen Abstand zur oberen Zeile ein.

Formatieren eines Bildes


Hinter src="*" können noch Optionen erscheinen und auch beliebig miteinander kombiniert werden:

Nicht vergessen: Optionen sind weitere Befehle innerhalb des selben Tags!

alt="*" (alt = alternative) Wenn der Nutzer das automatische Laden der Bilder im Browser abgeschaltet hat, erscheint anstatt der Bilder nur ein Rahmen, der diesen Alternativtext * enthält.
width=*
height=*
Hinter width= (Breite) bzw. height= (Höhe) können sie eine bestimmte Größe des Bildes in Pixeln erzwingen. Normalerweise wird ein Bild in der Originalgröße angezeigt. So können sie aber ein quadratisches Bild zum langen Rechteck machen, vergrößern oder verkleinern.
Wenn Sie entweder nur Breit oder nur Höhe angeben, wir die andere Seite proportional angepasst.
Auch wenn Sie ein Bild in Originalgröße einbinden möchten, ist es empfehlenswert die Größenangaben zu verwenden, da der Browser dadurch in der Lage ist, die Seite schneller aufzubauen.
Beachten Sie, das ein vom Browser vergrößertes Bild sehr gerastert wirkt. Wenn Sie eine Bild-Datei immer verkleinert einbinden, sollten Sie sie gleich durch ein kleineres Abbild ersetzen, dass in Originalgröße angezeigt werden kann. Das spart Speicherplatz und Ladezeit.

hspace=*
vspace=*
(hspace = horizontal space = horizontaler Abstand, vspace = vertical space = vertikaler Abstand) Mit hspace=* bzw. vspace=* legen Sie den Abstand des Bildes zu seiner Umgebung in Pixeln fest. (hspace waagerecht; vspace senkrecht)
border=0 (border = Umrandung) Wenn Sie Bilder als Verweis markieren, erscheint ein farbiger Rahmen um das Bild. Dieser kann oft sehr störend wirken, dann sollten Sie im Bild-Tag die Option border=0 einfügen, damit wird dieser Rahmen unterdrückt.

zwei Beispiele:

<img src="logo.gif" alt="meine Wolke" width=200 height=100>
<a href="firma.htm"><img src="logo.gif" border=0></a>

Außerdem können Sie mit der Option align=[left/right] Bilder ausrichten (align = Ausrichtung, left = links, right = rechts ). Der Text fließt dann an der Seite um das Bild herum. Soll der Text zwar anfangs neben dem Bild entlangführen, dann aber unter dem Bild weitergehen, setzen Sie an das Ende des Textes neben dem Bild <br clear=all>. Beispiel:

<img src="baum.gif" align=left> Dieser Text steht neben dem Bild.
<br clear=all> Und dieser unter dem Bild.

Text zunächst neben dem Bild. Er beginnt an der rechten oberen Ecke, da das Bild nach links ausgerichtet ist. Ein Abstand von 20 Pixeln zur Umgebung bewirkt gute Lesbarkeit.
Und nun wird darunter weitergeschrieben.

Praxistips: Gewöhnen Sie ich an, jedes Bild mit einem Alternativ-Text auszurüsten und immer Höhe und Breite des Bildes anzugeben, auch wenn es in der Originalgröße angezeigt werden soll. (siehe Guter HTML-Stil)
Bilder brauchen wesentlich mehr Speicherplatz als die eigentliche Internet-Seite. Reduzieren Sie in Ihren Bild-Dateien gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Bilder in eine einzige HTML-Datei.
Sollten Sie ein Bild einbinden wollen, das größer als 50 kB ist (und Sie es nicht weiter verkleinern können), erstellen Sie besser mit ihrem Bildbearbeitungsprogramm ein kleineres Abbild, binden Sie dieses ein und markieren Sie es als Verweis zum Original. (siehe auch Webgrafik)

Detaillierte Informationen über die Unterschiede zwischen GIF- und JPEG-Bildern finden Sie unter GIF/JPEG im Vergleich. Einige nützliche Bilder für ihre Homepage sind in StarHTML bereits enthalten.


StarHTML HTML-Wissen
Verweise und Anker   Hintergrundfarben und -bilder

Martin Zwirner ©12/1999 EMail Online-Forum