HTML-Einführung von Hubert Partl, Mai 1996

Bilder und Töne

Bilder - ja oder nein?

"Ein Bild sagt mehr als tausend Worte."

Ein Bild braucht aber auch mehr Speicherplatz und vor allem mehr Übertragungszeit als tausend Worte. Dies schafft insbesondere dann Probleme, wenn der Benutzer auf das World Wide Web über langsame oder teure Telefon-Leitungen oder mit PCs mit geringen Speichergrößen zugreift.

Es ist daher empfehlenswert, Bilder nur dann einzusetzen, wenn sie tatsächlich mehr Informationen als Worte enthalten oder wenn der optische Eindruck wesentlich ist, und mit unnötigen Verzierungen sparsam umzugehen.

Natürlich gibt es viele Anwendungen, bei denen auf Bilder nicht verzichtet werden kann und soll, von Landkarten, Konstruktionszeichnungen und Diagrammen bis zu Firmen-Logos und Kunstwerken. Auch können Symbole und Piktogramme für den Benutzer sehr nützlich sein, wenn sie richtig und konsistent eingesetzt werden, und die zugehörigen Files sind meistens so klein, daß sie nur wenig Probleme mit Speicherplatz und Übertragungszeit bewirken. Allerdings müssen dabei stets Alternativen für den Fall vorgesehen werden, daß die Symbole vom Web-Browser nicht dargestellt werden.

Bei Inline-Bildern, die mit dem jeweiligen HTML-File sofort mitübertragen werden müssen, ist Sparsamkeit besonders wichtig. Größere Bilder, die eine höhere Netzbelastung und Übertragungszeit benötigen, sollten deshalb besser als externe Files zur Verfügung gestellt werden, die vom Benutzer nur auf ausdrücklichen Wunsch übertragen werden, eventuell mit der Hilfe von sogenannten "Thumbnails".

Jedenfalls sollten Sie als Autor von Web-Pages genau überlegen, in welchen Fällen ein buntes und ansprechendes Aussehen wichtig ist, um Interessenten anzulocken, und in welchen Fällen der reine Informationsgehalt wichtiger ist. Der Unterschied ist so einfach wie die Wahl zwischen Ansichtskarten und Briefen...

Inline-Bilder <img> <object>

Unter Inline-Bildern versteht man Bilder und Symbole, die zwischen dem Text innerhalb eines HTML-Files erscheinen - im Gegensatz zu externen Bildern, die nur auf ausdrücklichen Wunsch des Benutzers und als separate Web-Page übertragen werden.

Ein Inline-Bild wird in die Web-Page mit einem Befehl der Form
<img src="URL" alt="Text">
eingefügt.

Der URL gibt das File an, in dem das Bild gespeichert ist. Im einfachsten Fall (relativer URL) besteht dieser URL nur aus dem Filenamen des Bildes, mit der richtigen "Extension":
xxxx.gif für Bilder im GIF-Format,
xxxx.jpg für Bilder im JPEG-Format,
xxxx.xbm für Graphiken im X-Bitmap-Format.
Dies sind die Bildformate, die von den meisten (wenn auch nicht allen) Web-Browsern unterstützt werden. Die Erzeugung der Bild-Files erfolgt mit spezieller Graphik-Software wie z.B. Paintshop oder dergleichen. Hinweise zum Erstellen von Graphiken finden Sie bei Stefan Münz.

Mit dem Parameter alt= muß der Text angegeben werden, der an Stelle des Bildes am Bildschirm erscheinen soll, falls der Benutzer einen Web-Browser verwendet, der keine Bilder darstellt. Wenn der Parameter alt= nicht angegeben wird, geben die meisten Web-Browser an Stelle des Bildes den Textstring "[IMAGE]" oder ein allgemeines Bild-Symbol (z.B. ein buntes Rechteck) aus.

Beispiel:

- - - Die Eingabe von 

<img src="wwwlogo.gif" alt="WWW">
- - - bewirkt eine Darstellung wie

WWW

(Je nach dem verwendeten Web-Browser sollten Sie hier entweder das bunte WWW-Logo oder die drei Buchstaben WWW sehen.)

- - -

In vielen Fällen ist es günstiger, den erklärenden Text nicht nur anstelle des Bildes sondern immer neben dem Bild auszugeben und den alt-Text dafür auf den Leerstring zu setzen.

Beispiel:

- - - Die Eingabe von 

<img src="austria.gif" alt=""> &Ouml;sterreich
- - - bewirkt eine Darstellung wie

Österreich

- - -

Der mit alt= angegebene Text kann keine HTML-Befehle enthalten. In HTML 3 ist deshalb als Alternative zum Befehl
<img src="URL" alt="Text">
auch ein wesentlich mächtigerer Befehl der Form
<object data="URL"> Text </object>
vorgesehen, bei dem im Text auch weitere HTML-Befehle verwendet werden können. Dieser <object>-Befehl wird von den meisten Browsern noch nicht unterstützt.

Mit speziellen Align-Parametern kann die Position des Bildes und des nachfolgenden Textes verändert werden.

Beispiel:

- - - Die Eingabe von 

<p align=center>
<img src="austria.gif" alt="" align="top"> &Ouml;sterreich
<p>
- - - bewirkt eine Darstellung wie

Österreich

- - -

Weitere Beispiele dazu finden Sie im Kapitel "Layout und Spezialeffekte".

Bitte beachten Sie die Hinweise auf die Nachteile von allzu vielen allzu großen Inline-Bildern und auf die Möglichkeit von externen Bildern und "Thumbnails".

Externe Bilder, Töne, Filme

Im Gegensatz zu Inline-Bildern, die automatisch innerhalb von Text-Files dargestellt werden, sollen größere Bilder sowie Töne, Filme und dergleichen extern, d.h. mit Hilfe von Hypertext-Links der Form
<a href="URL">Link-Text</a>
realisiert werden.

In diesem Fall sieht der Benutzer zunächst nur den Link-Text (oder einen sogenannten "Thumbnail") am Bildschirm und bekommt das Bild bzw. die Tonfolge oder den Video-Film erst dann auf seinen Client übertragen, wenn er dieses Link "auswählt".

Darin ist "URL" der URL des Files, das das Bild oder die Tonfolge oder den Film enthält. Im einfachsten Fall (relativer URL) besteht dieser URL nur aus dem Filenamen mit der richtigen "Extension". Die Extension des Filenamens gibt dem Web-Browser an, was das File enthält.

Beispiele:
xxxx.html für HTML-Files,
xxxx.ps für PostScript-Files,
xxxx.gif für Bilder im GIF-Format,
xxxx.jpg für Bilder im JPEG-Format,
xxxx.xbm für Graphiken im X-Bitmap-Format,
xxxx.au für Töne im AU-Format,
xxxx.wav für Töne im WAV-Format,
xxxx.aiff für Töne im AIFF-Format,
xxxx.mov für Video-Filme im QuickTime-Format,
xxxx.mpg für Video-Filme im MPEG-Format.

Je nach der Extension wird vom Web-Browser die entsprechende "Helper-Applikation" aufgerufen, die das File verarbeitet und den Inhalt ausgibt. Natürlich funktioniert das nur, wenn auf dem Client-Rechner die entsprechende Software installiert ist.

Es kann nützlich sein, bei Links auf große Files anzugeben, wie groß das betreffende File ungefähr ist, damit der Benutzer entscheiden kann, ob er es übertragen will, und abschätzen kann, wie lange die Übertragung dauern wird.

Beispiel:

- - - Die Eingabe von 

<a href="big.jpg">Gro&szlig;es Bild ohne Bikini (JPEG, 45k)</a>
- - - bewirkt eine Darstellung wie

Großes Bild ohne Bikini (JPEG, 45k)

- - -

Kleine und große Bilder (thumbnails)

Im Fall von großen Bildern kann es sinnvoll sein, eine kleine Version des Bildes als Inline-Bild ins HTML-File einzufügen, das gleichzeitig ein Link auf das eigentliche, große Bild ist.

Dies hat den Vorteil, daß der Benutzer sofort sehen kann, um was für ein Bild es sich handelt, und dadurch besser entscheiden kann, ob er das große Bild tatsächlich auf seinen Client übertragen will.

Diese kleinen Bilder sehen meist wie Briefmarken aus und werden im Fachjargon als "Daumennägel" (thumbnails) bezeichnet.

Beispiel:

- - - Die Eingabe von 

<a href="big.jpg"><img src="small.jpg" alt=""> 
 . . . "Geburt der Venus" von Sandro Botticelli (45k)</a>
- - - bewirkt eine Darstellung wie

. . . "Geburt der Venus" von Sandro Botticelli (45k)

- - -

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien