HTML-Einführung von Hubert Partl, September 1997


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.

Die meisten Web-Browser haben deshalb eine Option, die Darstellung von Bildern auszuschalten, und die wird erfahrungsgemäß auch von vielen Benutzern verwendet.

Es ist also 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 darauf achten, daß ein buntes und ansprechendes Aussehen nicht den Zugriff auf die wesentlichen Informationen behindert oder von ihnen ablenkt. Dies ist so ähnlich wie die Entscheidung zwischen einer Ansichtskarte oder einem Brief.


Die Wirkung auf die Menschen

Wenn man neben normalem Text auch andere Elemente wie Bilder, Töne, Videosequenzen und dergleichen einsetzen will, gibt es grundsätzlich zwei Möglichkeiten:

Auf die technischen Unterschiede in Hinblick auf Erreichbarkeit, Übertragungszeit etc. wurde bereits oben hingewiesen.

Hier folgen ein paar Anmerkungen zur unmittelbaren Wirkung auf die Menschen in Hinblick auf den vom Autor der Web-Page gewünschten Effekt.

Im Fall der externen Objekte wird jedes Objekt dem Betrachter bzw. Zuhörer für sich allein dargeboten und kann daher mit der vollen Aufmerksamkeit des Menschen rechnen.

Im Fall von Inline-Bildern und Objekten strömen jedoch mehrere Reize gleichzeitig auf den Menschen ein und konkurrieren um seine Aufmerksamkeit. Man muß daher ein paar psychologische Grundkenntnisse beachten, um den gewünschten Effekt zu erzielen und ihn nicht selbst zu zerstören:

Bilder ziehen die Aufmerksamkeit meist rascher und stärker an als Texte. Wenn z.B. ein Text vier Elemente beschreibt und nur drei von diesen Elementen durch eine Abbildung illustriert sind, werden viele Leser das vierte Element, bei dem das Bild fehlt, übersehen.

Wenn man will, daß die Leute den Text lesen, dann muß man ihn entweder komplett bebildern oder auf Inline-Bilder komplett verzichten.

Bewegte Objekte ziehen immer sofort die gesamte Aufmerksamkeit des Menschen auf sich und lenken damit stark von allen nicht bewegten Elementen ab. Wenn sich irgendwo auf dem Bildschirm etwas bewegt oder dreht oder etwas blinkt, ist es für den Menschen fast unmöglich, einen Text konzentriert zu lesen oder ein Bild genau zu betrachten.

Wenn man will, daß die Leute den Text lesen, darf man seine Wirkung nicht durch bewegte Effekte stören. Animationen und Videosequenzen werden nur dann sinnvoll eingesetzt, wenn sie die Hauptinformation enthalten und sich die gesamte Aufmerksamkeit des Lesers auf sie konzentrieren soll.

Besondere Vorsicht ist bei allen akustischen Effekten geboten, hier vor allem in Hinblick auf die Umgebung. Akustische Signale, Sprachausgabe, Hintergrundmusik usw. können sich extrem störend auswirken, wenn mehrere Personen in einem Raum arbeiten oder wenn neben dem Computer auch andere Schallquellen vorhanden sind, z.B. bei Gesprächen mit persönlich anwesenden Kunden oder bei telefonischen Auskünften.

Deshalb sollte man alle Töne und Geräusche möglichst immer nur als externe Objekte realisieren, die nur auf ausdrücklichen Wunsch ("Anklicken") des Benutzers abgespielt werden, und niemals als Inline-Objekte, die automatisch beim Ansehen einer Web-Page laut werden.

Außerdem sollte man beachten, daß manche Menschen gewisse Behinderungen aufweisen können, wie z.B. Kurzsichtigkeit, Farbenblindheit oder Schwerhörigkeit, und daß es Fälle gibt, wo jemand die Web-Page auf einem einfachen Schwarz-weiß-Drucker ausdrucken und den Printout dann anderen Menschen zeigen möchte.

Man sollte daher immer Alternativen vorsehen, damit auch diese Menschen die wesentlichen Informationen erfassen können, also z.B. immer Text-Alternativen zu Bildern oder Tönen angeben, konventionelle Markierungen zusätzlich zu Farbeffekten verwenden, die vom Leser eingestellten Schriftgrößen und Bildschirmfarben nicht verändern, usw. Entsprechende Hinweise finden Sie in den jeweiligen Kapiteln der HTML-Einführung.


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.
Dies sind die beiden Bildformate, die von den meisten Web-Browsern unterstützt werden. Andere Format wie "X Bitmap" oder "MS Windows Bitmap" werden nicht universell unterstützt und sollten deshalb nicht verwendet 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. Wichtig ist, daß die Auflösung und die Farbpalette auf die von den meisten Web-Browsern unterstützten Möglichkeiten abgestimmt ist und das File nicht durch eine unnötig hohe Auflösung oder Farbgenauigkeit viel zu groß wird und damit die Übertragung an den Client viel zu lange dauern würde.

Mit dem Parameter alt= muß der Text angegeben werden, der an Stelle des Bildes am Bildschirm erscheinen soll, falls der Benutzer die Darstellung von Bildern ausgeschaltet hat oder einen Web-Browser verwendet, der keine Bilder darstellt, sowie für Suchmaschinen. Wenn der Parameter alt= nicht angegeben wird, geben die meisten Web-Browser an Stelle des Bildes einen sinnlosen Textstring wie "[IMAGE]" oder ein leeres 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 4 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 (siehe die Beschreibung des <object>-Befehls).

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".


Inline-Objekte <object>

In HTML 4 ist als Ersatz für die Befehle <img>, <embed>, <bgsound>, <applet> u.a. ein wesentlich mächtigerer <object>-Befehl vorgesehen. Allerdings wird der <object>-Befehl von vielen Web-Browsern noch nicht oder noch nicht vollständig unterstützt. Es kann daher sinnvoll sein, eher auf den <img>-Befehl oder auf externe Dateien auszuweichen.

Die wichtigsten Erweiterungen gegenüger dem <img>-Befehl sind:

Der <object>-Befehl hat grundsätzlich den folgenden Aufbau:

<object data="URL" type="MIME-Type">
... HTML-Text für die Alternative ...
</object>

Mit URL und MIME-Type wird angegeben, welche Datei eingefügt werden soll und um was für eine Art von Datei es sich handelt. Hier ein paar Beispiele für Filenamen und zugehörige MIME-Types:


xxxx.gif      image/gif

xxxx.jpg      image/jpeg

xxxx.mid      audio/midi

xxxx.wav      audio/x-wav

xxxx.mov      video/quicktime

xxxx.mgp      video/mpeg

xxxx.ps       application/postscript

xxxx.pdf      application/pdf

xxxx.txt      text/plain

Beispiel 1:


<h3>Zugriffsstatistik</h3>

<p>

<object data="zugriff.gif" type="image/gif">

  <table border>

  <tr><th>Jahr    

      <th>Files<br>am Server    

      <th>Zugriffe<br>pro Monat

  <tr><td align=right>1993

      <td align=right>0

      <td align=right>0

  <tr><td align=right>1994

      <td align=right>160

      <td align=right>7.000

  <tr><td align=right>1995

      <td align=right>410

      <td align=right>25.000

  <tr><td align=right>1996

      <td align=right>6.500

      <td align=right>158.000

  <tr><td align=right>1997

      <td align=right>14.500

      <td align=right>325.000

  </table>

</object>

Wenn der Web-Browser <object> versteht und die Darstellung von Bildern eingeschaltet ist, erscheint das Diagramm mit der graphischen Darstellung der Zugriffsstatistik. Wenn nicht, werden die Zugriffszahlen in Form einer Tabelle dargstellt. Das sieht dann etwa so aus:

Zugriffsstatistik

Jahr Files
am Server
Zugriffe
pro Monat
1993 0 0
1994 160 7.000
1995 410 25.000
1996 6.500 158.000
1997 14.500 325.000

- - -

Beispiel 2:


<h3>Entwicklung eines Schmetterlings</h3>

<p>

<object data="butterfly.mpg" type="video/mpeg">

  <p>

  Der 

  <a href="/brehm/tierleben.html#schmett">Schmetterling</a>

  durchl&auml;uft 4 Entwicklungsstufen:

  <ol>

  <li><img src="ei.jpg"      alt=""> Ei

  <li><img src="raupe.jpg"   alt=""> Raupe

  <li><img src="puppe.jpg"   alt=""> Puppe (Kokon)

  <li><img src="schmett.jpg" alt=""> Schmetterling

  </ol>

</object>

Wenn der Web-Browser <object> versteht und MPEG-Videos darstellen kann, erscheint ein Video, das die Entwicklung des Schmetterlings zeigt. Wenn nicht, werden die 4 wichtigsten Phasen der Entwicklung mit je einem Bild plus erklärendem Text gezeigt bzw., falls die Darstellung von Bildern ausgeschaltet ist, nur die erklärenden Texte. Das sieht dann etwa so aus:

Entwicklung eines Schmetterlings

Der Schmetterling durchläuft 4 Entwicklungsstufen:

  1. Ei
  2. Raupe
  3. Puppe (Kokon)
  4. Schmetterling

- - -


Externe Bilder, Töne, Filme

Im Gegensatz zu Inline-Bildern und Inline-Objekten, 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.mid für Töne im MIDI-Format,
xxxx.wav für Töne im WAV-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.

Klein bedeutet hier nicht nur eine kleine Darstellung am Bildschirm oder Printout sondern vor allem auch eine geringe Dateigröße und damit kürzere Übertragungszeit (z.B. durch eine weniger genaue Auflösung und weniger Farben als das Originalbild).

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