1.7 Bilder im Web

Wirklich interessant wurde das Internet erst, als es anstelle von reinen Text-Dokument auch den Einsatz von Grafiken, Filmen und Klängen erlaubte. Die beiden wichtigsten Grafikformate, die von den Bowsern direkt unterstützt werden sind das GIF- und das JPEG-Format:

GIF - (Graphics Interchange Format) von CompuServe entwickelt, Standard das "89er-Format"

  • max. 8bit Farbtiefe = max. 256 Farben (auch weniger möglich)
  • Kompression ohne Verluste ca. 10-30fach im Vergleich zum BMP-Format.
  • Ein Bild kann interlaced (schichtweise) zur Anzeige kommen.
  • In einer Datei können mehrere Grafiken in einer gesteuerten Bildfolge gespeichert werden, die dann als animierte Grafik angezeigt werden.
  • Eine der Farben kann als transparent definiert werden.
  • Geeignet für Navigationselemente Schaltflächen, Logos, Symbole, Cliparts.

JPEG - entwickelt von der Joint Photographic Expert Group

  • 24bit Farbtiefe = ca. 16,7 Millionen Farben
  • Der Kompressionsfaktor ist wählbar von klein bis sehr hoch, bei zunehmenden Verlust an Bildinformationen: Je höher die Kompression, desto schlechter die Bildqualität. Eine akzeptable Qualität erhält man bei Faktoren von 8 bis 15.
  • Vordefinierbare Punktdichte, wobei für die Bildschirmanzeige ein Wert 75 DPI (dots per inch) hinreichend ist.
  • Ein Bild kann "progressiv" gespeichert und damit schichtweise aufgebaut werden.
  • Geeignet für Photos, Hintergrundgrafiken, allgemein für Grafiken mit feinen Farbabstufungen

Einbindung

Um ein Bild als Hintergrundgrafik einer Seite zu verwenden wird dem BODY-Tag das Attribut background="Pfad/Datei" hinzugefügt. Das angegebene Bild wird dann so häufig neben- und untereinander gesetzt, bis der sichtbare Teil des Dokuments komplett hinterlegt ist.

Syntax:  <BODY background="../gifs/bk001.jpg" text="white">

Eigenständige Grafiken werden mit dem <IMG>-Tag (image source = Bildquelle) eingefügt:

Syntax:  <IMG SRC="Pfad/Bilddatei" ALT="Text" ...>

src="..." verweist auf den Speicherort und den Namen der Bilddatei (URL)
alt="..." gibt einen alternativen Text zum Bild an, der während des Bildaufbaus zu sehen ist oder dann, wenn das Bild nicht geladen werden kann.
height=n
width=n
bestimmt die Höhe bzw. Breite der Grafik in Pixel. Es ist möglich, ein Bild auch kleiner/größer darstellen zu lassen, als durch die Grafik selbst bestimmt.
border=n bestimmt die Stärke eines Rahmens um das Bild in Pixel.
vspace=n
hspace=n
bestimmt den vertikalen bzw. horizontalen Abstand des Bildes zu anderen Seitenelementen in Pixel.
align="..." bestimmt die Ausrichtung eines Bildes in Bezug zu den folgenden HTML-Elementen. Mögliche Werte sind: left, right, top, middle und bottom.

Anm.: Ab HTML 4.0 kann für verweissensitive Grafiken auch das <OBJECT>-Tag benutzt werden.


Top  Previous Next