Jetzt wird's noch bunter - Bilder in HTML

In diesem Kapitel geht es wieder etwas trocken los mit den verschiedenen webtauglichen Grafikformaten. Aber keine Sorge, so kompliziert ist es nicht, und außerdem ist es ganz nützlich zu wissen, für welche Zwecke welches Format besonders geeignet ist, damit die eigene Homepage auch besonders schön ist und keine langen Ladezeiten benötigt.

Themen in diesem Kapitel:

1. Grafikformate
2. Wie kommt das Bild auf die Seite?
3. Parameter des Image-tags
4. Verwendung von Bildern
1. Bilder im allgemeinen
2. Bilder als Trennlinien
3. "inline-pictures"
4. Hintergrundbilder
5. Und woher bekomme ich Bilder?
6. Fragen und Aufgaben

1. Grafikformate

Im Web werden drei Grafikformate verwendet: GIF, JPEG und PNG, wobei das letzte sich noch nicht überall durchgesetzt hat. GIF und JPEG sind die am häufigsten verwendeten Formate, beide weisen Stärken und Schwächen auf.

Das GIF-Format

GIF steht für Graphics Interchange Format und ist von Compuserve extra fürs Internet entwickelt worden. GIF bietet folgende Vorteile:

• Die Komprimierung ist verlustfrei, d.h. die Qualität wird durch die Komprimierung nicht schlechter
• Man kann eine Farbe als transparent definieren und so einen transparenten Hintergrund erstellen, mit dem das Bild auf verschiedenen Fensterhintergründen gut aussieht. Ein Bild mit einem grauen Hintergrund z.B. sähe in einem Fenster mit weißem Hintergrund nicht unbedingt schön aus.
• GIFs sind animierbar

Das JPEG-Format

JPEG oder JPG steht für Joint Photographic Experts Group, die dieses Format entwickelt hat. Der Nachteil an diesem Format ist, dass die Qualität der Grafik umso schlechter wird, je stärker man sie komprimiert, dafür sind aber bis zu 16,7 Mio. Farben speicherbar.
Das JPEG-Format eignet sich gut für eingescannte Fotos und ähnliche Bilder, die mit mehr als 256 Farben besser aussehen.

Das PNG-Format

PNG steht für Portable Network Graphics. Es ist das neueste webtaugliche Grafikformat und vereint die Vorteile von GIF und JPEG: Es bietet eine verlustfreie Komprimierung von 16,7 Mio. Farben, bietet wie GIF transparente Hintergrundfarben, und außerdem lassen sich zusätzliche Informationen wie Copyrighthinweise mit dem Bild abspeichern.

Programme zum Konvertieren von Grafiken

Zum Konvertieren von einem Grafikformat in ein anderes braucht man entsprechende Software. Microsoft Paint (bei Windows standardmäßig mitinstalliert) kennt die Formate BMP, GIF und JPEG, zum Konvertieren muss die Datei einfach im gewünschten Format abgespeichert werden.
Andere Programme beherrschen die Konvertierung aber besser, und für ein paar sollen hier noch Links zum Download folgen:

• bmp2jpg (Download 0,04 MB): Konvertiert Windows-BMP-Dateien ins JPEG-Format
• cjpeg (Download 0,04 MB): Konvertiert GIF-Dateien ins JPG-Format
• djpeg (Download 0,04 MB): Konvertiert JPEG-Dateien ins GIF-Format

So, jetzt wissen wir schon mehr darüber, welche Bildformate wofür geeignet sind. Zu klären ist nun nur noch, wie das Bild (in einem ihm angemessenen Format) auf die Seite kommt, und wo man überhaupt Bilder einsetzen kann.

2. Wie kommt das Bild auf die Seite?

Alle Bilder auf einer HTML-Seite (außer dem Hintergrundbild) werden mit demselben Tag eingefügt, dem Image-tag <IMG SRC="Bilddatei.xxx">, wobei die Bilddatei mit vollem Namen, also mit der Endung ".gif", ".jpeg"/".jpg" oder ".png", angegeben werden muss.
Befindet sich das Bild im selben Ordner wie das HTML-Dokument, in dem es erscheinen soll, dann genügt es, den Namen der Bilddatei wie oben gezeigt einzusetzen. Dies wird bei den meisten privaten Homepages der Fall sein, weil die Datenmengen dort normalerweise überschaubar bleiben und sich somit das Anlegen einer koplexeren Verzeichnisstruktur erübrigt.
Befinden sich Bild und HTML-Dokument in verschiedenen Ordnern, so muss auf das Bild verlinkt werden (siehe hierzu auch den entsprechenden Abschnitt im Kapitel Verweise). Hierfür ist es notwendig, sich klarzumachen, wie die verschiedenen Ordner miteinander zusammenhängen und sich z.B. in einem Verzeichnisbaum die Struktur aufzuschreiben.

In der folgenden Erklärung bedeutet:
Dateiordner = Ordner, in dem sich die HTML-Datei befindet, die das Bild enthalten soll
Bildordner = Ordner, in dem sich das Bild befindet

Beispiel:

Homepage-Ordner

index.html
Über Mich

ich.html
lebenslauf.html
hobbies.html

Mein HTML-Kurs
Bilder

ich.jpg
hund.jpg
linie.gif

2) Der Bildordner ist dem Dateiordner nicht untergeordnet: In die Datei "ich.html" im Ordner "Über mich" (=Dateiordner) soll nun das Bild "ich.jpg" aus dem Ordner "Bilder" (= Bildordner) eingefügt werden. Anhand des Verzeichnisbaumes können wir sehen, dass sich die beiden Ordner auf der gleichen Ebene befinden, denn beide stehen im Ordner "Homepage-Ordner". Um auf das Bild zu verlinken, müssen wir also eine Ebene nach oben (in den "Homepage-Ordner") gehen und von dort in den Bildordner ("Bilder"). Das Image-tag würde in diesem Falle lauten:
<IMG SRC="../Bilder/ich.jpg">, wobei "../" soviel bedeutet wie "einen Ordner nach oben" und, wenn nötig, auch mehrere Male hintereinander möglich ist.

3) Das Bild befindet sich irgendwo im Internet:
Es ist auch möglich, auf Bilder aus anderen Internetseiten zu verlinken, die Bilder sozusagen auszuleihen. Hierfür muss man allerdings den genauen Ort wissen, an dem das Bild gespeichert wird, und man sollte vorher beim Inhaber der Seite um Erlaubnis bitten.
Das Image-tag für ein Bild aus diesem Kurs, z.B. für das Bild zum RGB-Prinzip zu Beginn des Kapitels "Farben", lautet dann:
<IMG SRC="http://userpage.fu-berlin.de/~mirjamk/htmlkurs/rgb.gif">, es muss also die genaue Internetadresse angegeben werden.

3. Parameter des Image-tags

Im Image-tag können noch weitere Angaben gemacht werden, z.B. Festlegung von Breite und Höhe des Bildes, Abstand des Bildes vom Text u.a. Diese werden hinter IMG SRC="Bilddatei" eingefügt und sollen nun kurz vorgestellt und erklärt werden.

• ALT="Text, der das Bild kurz beschreibt": Hier wird ein kurzer Text eingefügt, der angezeigt wird, wenn man mit der Maus länger auf dem Bild bleibt oder wenn das Bild nicht geladen wird oder geladen werden kann, z.B. weil der Benutzer keine Bilder sehen kann (textbasierter Browser) oder will (Bilder können zugunsten schnellerer Ladezeiten ausgeschaltet werden) oder wenn das Bild aus unerfindlichen Gründen nicht vorhanden ist.
  Der Alternativtext ist besonders wichtig, wenn das Bild einen Verweis darstellt, weil insbesondere Leute mit textbasierten Browsern sonst gar keine Chance haben zu erkennen, was sich hinter dem Verweis verbirgt.
• HEIGHT="x" und WIDTH="x" dienen zur Festlegung von Höhe ("height") und Breite ("width") des Bildes. Da die Proportionen des Bildes vom Browser beibehalten werden, genügt hier eine Angabe (wahlweise Höhe oder Breite).
  Höhe und Breite können, wie es schon von der Trennlinie bekannt ist, entweder absolut in Pixeln (z.B. WIDTH="200" oder in Prozent des Browserfensters (z.B. HEIGHT="50%" angegeben werden.
• ALIGN="left/right/center" bewirkt die linksbündige / rechtsbündige / zentrierte Ausrichtung des Bildes im Browserfenster (Standard ist linksbündig).
• BORDER="x": Dieses Attribut gibt dem Bild einen x Pixel breiten (im Internet Explorer schwarzen) Rahmen.
  Mit BORDER="0" kann der Rahmen um ein Bild entfernt werden, das einen Link darstellt.
• HSPACE="x" ("horizontal space" = horizontaler Abstand) legt den Abstand (in Pixeln) fest, den ein Bild oben und unten vom Text haben soll.
• VSPACE="x" ("vertical space" = vertikaler Abstand) legt den Abstand (in Pixeln) fest, den ein Bild rechts und links vom Text haben soll.

4. Verwendung von Bildern

Es gibt verschiedene Möglichkeiten, Bilder in HTML-Dokumenten zu verwenden. Einige der gebräuchlichsten Anwendungsmöglichkeiten sollen hier vorgestellt werden, weitere wie "Bilder als Verweise" oder "Bilder als Aufzählungszeichen" werden in den entsprechenden Kapiteln (Verweise und Listen) noch besprochen werden.
Die Verwendungsmöglichkeiten, die für uns an dieser Stelle des Kurses schon interessant sind, sind folgende:

1. Bilder im allgemeinen
2. Bilder als Trennlinien
3. Bilder als "inline-pictures"
4. Hintergrundbilder

A. Bilder im allgemeinen

Bilder werden, wenn nicht anders mit ALIGN= angegeben, am linken Rand des Browserfensters angezeigt. Der Text steht zunächst rechts davon und wird bei Bedarf unter dem Bild weitergeführt, die Abstände zwischen Text und Bild lassen sich dabei mit VSPACE= und HSPACE= festlegen.
Will man, dass kein Text neben dem Bild steht, muss das image-tag innerhalb eines Absatzes stehen: <P><IMG SRC="bilddatei.jpg"></P>

Ein elegantes Mittel, das mehr Möglichkeiten bietet, Text und Bilder anzuordnen, sind "blinde Tabellen" (Tabellen ohne Rahmen). Mehr dazu siehe im Kapitel Tabellen.

B. Bilder als Trennlinien

Eine häufige Verwendung von Bildern ist die Verwendung als Trennlinie anstelle einer horizontalen Linie (<HR>). Hierfür verwendet man - wie für alle anderen Bilder - das image-tag, in das der Name der Datei eingefügt wird, die das Linienbild enthält. Damit vor und nach der Trennlinie eine freie Zeile ist, wird davor und danach je ein Paragraphen-tag geschrieben. Der Code lautet also insgesamt (mit "linie.gif" als die gewünschte Bilddatei):

<P><IMG SRC="linie.gif"></P>

Das sieht dann so aus:

Ohne Paragraphen-tags geschieht folgendes:
Das Bild wird mitten im Text eingebaut, man erhält ein sogenanntes inline-picture.

C. Inline-pictures

Kleine Bilder können mitten im Text eingebaut werden, sie werden dann "inline-pictures" genannt. Das image-tag wird dabei einfach in den aktuellen Text geschrieben.
Ein Beispiel:

<EM> Zählen Sie diese Sterne <IMG SRC="star.gif"> und Sie können gewinnen!!! </EM>

wird zu: Zählen Sie diese Sterne und Sie können gewinnen!!!

D. Hintergrundbilder

Hintergrundbilder sind sehr beliebt zur Verschönerung von HTML-Seiten. Ein kleines Bild reicht dabei für die gesamte Fläche aus, weil der Browser den gesamten Hintergrund damit "kachelt", d.h. er vervielfältigt das Bild und setzt es in alle Richtungen aneinander, bis der gesamte Hintergrund bedeckt ist.
Hintergrundbilder werden allerdings nicht mit dem image-tag programmiert, sondern mit einem Attribut im Body-tag:

<BODY BACKGROUND="Bilddatei">

Bei dunklen Hintergrundbildern und dementsprechend heller Schrift sollte man immer eine ähnliche Farbe als Hintergrundfarbe definieren, falls das Bild - aus welchen Gründen auch immer - nicht geladen wird. Standardmäßig ist die Hintergrundfarbe nämlich Weiß oder grau, und helle Schrift auf hellem Grund liest sich sehr schlecht.
Außerdem sollten auffällige Hintergrundbilder vermieden werden, das sie den Leser der Seite vom Wesentlichen abhalten (es sei denn, das Hintergrundbild ist das Wesentliche..)

5. Und woher bekomme ich Bilder?

Bilder kann man auf verschiedene Arten bekommen: Man hat selbst einen Scanner und kann sie einscannen oder der beste Freund / die beste Freundin oder der nette Nachbar usw. hat einen Scanner. Oder man malt sie sich selber, was allerdings mit Paint oder ähnlichem nicht so ganz befriedigend ist.
Für alle, die keinen Scanner zur Verfügung haben und keine Computergrafiken erstellen können oder wollen oder einfach noch ein paar nette Icons und Buttons auf die Homepage setzen wollen, gibt es auch die Möglichkeit, Bilder und Bildarchive mit webtauglichen Bildern im Internet herunterzuladen, z.B. bei folgenden Adressen:
University of North Carolina at Greensboro
Realm Graphics
Weitere Adressen findet man mit Hilfe von Suchmaschinen.

Außerdem haben wir hier eine kleine Sammlung von Bildern und Hintergründen zusammengestellt: Bilder (Download), ZIP-Datei, ca. 130 KB

Fragen und Aufgaben

1. Welche webtauglichen Grafikformate kennst Du? Welches würdest du für eingescannte Fotos benutzen, welches für Buttons?
2. Wozu dient der Parameter ALT="..." im Image-tag?
3. Wie bekommt ein Dokument ein Hintergrundbild?
4. Entwirf eine kleine Homepage mit Informationen über Dich (Hobbies, Lieblingsgedicht etc.) und gestalte sie mit Bildern (Bilder zum Downloaden siehe im vorigen Abschnitt).

Ein paar abschließende Worte...