Technische und grafische Standards
für Bilder, Schrift, Audio und Video im Internet

Ein Versuch die maßgeblichen Techniken und Richtlinien für die Darstellung von verschiedensten Inhalten im Internet vorzustellen.

Inhaltsverzeichnis

1. Standards
2. Menschliche Wahrnehmung
3. Technische Standards
4. Fazit

1 Standards

Standards sind Normen und Richtlinien, die festgelegt werden um Einheitlichkeit zu gewährleisten. Diese können sich auf alle möglichen Merkmale des zu vereinheitlichen Objektes beziehen, z.B. die Größe (bei Papier DIN-Normen) oder auf die Qualität.

Webstandards, sind Standards, die für die Erstellung und Wiedergabe von Webbasierten Inhalten festgelegt wurden, um eine einheitliche Darstellung zu gewährleisten. Nachfolgend wird auf die verschiedenen Webstandards bezüglich Bilder, Schrift, Audio und Video genauer eingegangen. Zuvor wird noch kurz die Bedeutung von Webstandards erläutert: Einheitliche Normen gewährleisten eine einheitliche Darstellung der Website in allen Browsern, da diese alle Standards unterstützen. Dadurch wird auch die Erstellung von Websites vereinfacht. Dies beinhaltet ebenfalls, dass die Kosten für eine Website Entwicklung niedriger sind. Des Weiteren wird eine langfristige Verwendbarkeit der Sites gewährleistete, da die Standards auch noch in neueren Browser Generationen zum Einsatz kommen werden. Webstandards ermöglichen den Einsatz neuer Webtechnologien, da diese in allen Browsern, nicht nur in denen eines Herstellers, unterstützt werden.

Da die Beachtung technischer Standards alleine keine gute Website ausmacht, wird an dieser Stelle eine Einführung in das Thema Screen Design gegeben.


1.1 Screen-Design

Screen Design ist die benutzer- und mediengerechte Darstellung von Daten auf einem Computer-Monitor. Daten können für den Nutzer zu Informationen werden und durch die Verbindung mit seinem Vorwissen kann neues Wissen entstehen. Dabei gilt es darauf zu achten, dass der Anwender die Relevanz der Daten für sich erkennen und einschätzen kann und diese in Beziehung zu seinem Vorwissen setzt. Des Weiteren müssen die Daten so aufbereitet sein, dass sie vom Anwender wahrgenommen, aufgenommen und verarbeitet werden können. Außerdem müssen die Daten in irgendeiner Form strukturiert sein. Diese Struktur muss für den Anwender nachvollziehbar, d.h. intuitiv verstehbar sein.

Das System, das die Daten zur Verfügung stellt (z.B. ein digitales Informationssystem) muss auf Aktionen des Anwenders angemessen - also seinen Erwartungen gemäß - reagieren.

Die Kombination aus Daten und Screen Design ist wichtig, denn ein solides Screen-Design ohne relevante, nutzbare Daten, ist eine überflüssige Spielerei. Daten ohne ein effektives Screen-Design haben keinen Wert für den Benutzer, da auf sie nicht angemessen zugegriffen werden kann. Nur wenn Beide Elemente - Daten und Interface -sich ergänzen erhalten sie einen Wert.

• Die Daten müssen in irgendeiner Form strukturiert sein. Diese Struktur muss für den Anwender nachvollziehbar, d.h. intuitiv verstehbar sein.
  
  
• Das System, das die Daten zur Verfügung stellt (z.B. ein digitales Informationssystem) muss auf Aktionen des Anwenders angemessen - also seinen Erwartungen gemäß - reagieren.
  
  

Das Screen-Design erhält nach diesem Verständnis eine wesentliche, eine zentrale Bedeutung. Erst dann, wenn Daten effektiv genutzt werden können, erhalten sie einen Wert für den Benutzer. Dies gilt sowohl für Informationssysteme als auch für Lernprogramme oder Werbeprodukte.

Ein solides Screen-Design ohne relevante, nutzbare Daten, ist überflüssige Spielerei und Daten ohne ein effektives Screen-Design haben keinen Wert für den Benutzer, da auf sie nicht angemessen zugegriffen werden kann.

Fazit: Beide Elemente - Daten und Interface - müssen sich ergänzen und erhalten nur in ihrer Kombination einen Wert.

2 Menschliche Wahrnehmung

Bevor wir auf die Standards für Bild, Ton und Schrift im Internet eingehen, wollten wir nochmals wiederholen, was unserer Meinung nach grundlegend für das Verständnis über das wie und warum bei der digitalen Aufbereitung von Informationen am Bildschirm ist. Dazu gehören wie immer die Fragen nach dem "Was-will-man-mit-der-Information-transportieren", "Wer-ist-unsere-Zielgruppe", "Was-ist-das-Thema", sprich worum geht es und wie groß ist die Aktualität der Information. Das hilft Ihnen auch zu erkennen, wann sie eine oder mehrere der folgenden Grundlagen in der Wahrnehmung missachten können, um Ihre Zielgruppe "gezielt" zu ködern. Denn schließlich ist bei all den Statistiken und Untersuchungen auch klar, dass in dem heute existierenden Käufermarkt, nichts so sehr langweilt, wie bereits ausgetretene Pfade und eine langweilige Gestaltung.


2.1 Wahrnehmung am Bildschirm

In den folgenden Abschnitten finden Sie einmal einige Studien und deren Ergebnisse zur Bildschirmtätigkeit auf einen Blick:

2.1.1 Allgemeines über Bildschirmarbeit
Hier erst einmal die wichtigsten Fakten unreflektiert:

• Lesen am Bildschirm ermüdet stärker
• Lesen am Monitor ist bis zu 25% langsamer
• Texte werden am Bildschirm schlechter erfasst
• "Scrollen" verlangt mehr Konzentration und motorische Fähigkeiten als die Seiten eines Buches zu durchblättern
• Artikel aus dem Netz besitzen eine geringere Glaubwürdigkeit
• Texte werden im Web eher überflogen (sog. "scanning")

Die schnellere Ermüdung des Bildschirmarbeiters hat verschiedenste Ursachen. Erst einmal ist eine Bildschirmseite aus vielen Bildpunkten aufgebaut (sog. Pixel) ist und über eine sehr niedrige Auflösung von 72 dpi (Mac) bzw. 96 dpi (Windows) verfügt und der Monitor bekanntermaßen nur eine begrenzte Darstellungsfläche besitzt, ist es schwierig die visuellen Elemente dem menschlichen Auge ansprechend zu präsentieren. Zur Verdeutlichung: ein Fax hat immerhin noch 100 dpi, wenn es aus dem Faxgerät kommt!

Weitere Fakten, die unser menschliches Auge beim Lesen am Monitor überfordern:

• das bekannte Monitorflimmern (erst ab 100 Hz Horizontalfrequenz des Bildschirms ist dieses Flimmern auf die Dauer erträglich)



• der Benutzer blickt direkt in eine Lichtquelle! (bei Papier reflektierendes Licht)



• die starre Sitzhaltung gegenüber dem häufigen Haltungswechsel beim Lesen eines Buches oder einer Zeitschrift.



• da die Benutzer in den Monitor "stieren" sind die Folgen weniger Lidschläge und dadurch schnell austrocknende Augen!

Die schlechte Aufnahmefähigkeit am Bildschirm resultiert aus der schlechteren Konzentration bei längeren Texten durch das zusätzliche "scrollen".

Außerdem werden Texte beim Lesen im Internet eher überflogen (sog. "scanning"), um die Relevanz des Textes zu erfassen, dadurch wird zum einen die Aufnahme der Textaussagen erschwert, zum anderen führt dies bei längeren Texten dazu, dass die Menschen diesen ausdrucken, um ihn dann zu erst richtig zu lesen! (dass heißt auch, dass sie eine Druckfunktion bei allen umfangreicheren Informationen, die Sie anbieten, einbauen sollten!)

2.1.2 Bilderwelten im Internet
Einige Punkte über die man sich bei der Bildauswahl und -bearbeitung für den Bildschirm im Klaren sein sollte:

• Bilder können schneller erfasst werden, als Texte
• Grafiken werden besser erinnert
• der Prozess der Bildverarbeitung ist für den Rezipienten weniger anstrengend
• die Gedächtnisleistung wird durch Bilder stark erhöht
• Bilder beeinflussen unser Verhalten indem sie Emotionen wecken

Das Bilder schneller erfasst werden liegt an den Eigenheiten des "Symbolsystems" Bild. Bilder codieren Informationen anders als Text. Das Bild präsentiert sozusagen alle Informationen auf "einen Blick", während dies z.B. bei Sprache und Text sequenziell geschieht. Deshalb kann das Thema eines klaren, übersichtlichen Bildes in einer 1/1000 Sekunde erkannt werden und schon der Volksmund sagt bekanntermaßen: "Ein Bild sagt mehr als 1000 Worte"

Bilder haben im Prinzip 3 Funktionen im Netz:

• Veranschaulichung der Thematik
• Strukturierung (kann der Orientierung dienen, ebenso wie es die Struktur des Themas visualisieren kann)
• Dekoration soll motivierend auf den Benutzer wirken!

2.1.3 Merksätze für die Darstellung am Bildschirm
Texterstellung am Monitor:

• Benutzen Sie einen einfachen Satzbau und klare Wortwahl
• Schreiben Sie klar strukturiert
• Halten Sie sich kurz und seien Sie prägnant
• Bauen Sie konkrete Beispiele ein
• Schreiben Sie im sog. "Inverted Pyramid Style":

Texte beginnen Sie mit der Zusammenfassung dessen was folgt. Ähnlich dem Zeitungsstil:

1. Überschrift



2. Zusammenfassung



3. Details

Merksätze für Bilder, die wirken:

• Zeigen Sie große Ausschnitte
• Reduzieren Sie das Bild auf das Wesentliche
• Nicht bunt, sondern farbig
• Lösen Sie Emotionen aus
• Gehen Sie in die Tiefe, das Wichtige zu vorderst, der Rest tritt in den Hintergrund
• Erzeugen Sie Spannung
• Gehen Sie sparsam mit Bildmaterial um, sonst verliert es an Wirkung

Die Grundüberlegung ist natürlich auch hier erst einmal die, zu wissen wen man anspricht und was man bezwecken will. Dann sollte man abwägen welches Mittel am besten die gewünschte Reaktion oder Einstellung fördert.

• Nähe
  Gehen Sie nah ran und zeigen Sie was Sie wollen. Fangen Sie den Betrachter, durch etwas was ins Auge springt..



• Reduktion:
  Man muss nicht alles zeigen, um vom Betrachter verstanden zu werden



• Farbigkeit:
  Die meisten Fotos sind nicht bunt, sonder farbig. Setzen Sie Farben gezielt ein.



• Emotionen:
  Lösen Sie Erinnerungen, Wünsche, Assoziationen oder andere Emotionen aus! (alte Menschen, Liebende, Babys, Hochzeit, Gipsbein, etc.)



• Spannung:
  Kontraste, Unschärfe, fehlende Bildinformationen, etc.

Beispiele:




2.2 Was ist ein Gestaltungsraster?

Definitionen:

- "Eine implizite Struktur (Gestaltungsraster) des Bildschirminhalts setzt die einzelnen Elemente in Beziehung zueinander und lässt sie so zu einer Gesamtheit werden" - "Gestaltungsraster strukturieren den vorgegebenen Platz in Abschnitte, an denen sich dann die Texte und Bilder ausrichten."

Das Gestaltungsraster ist ein Hilfsmittel des modernen Buchdrucks, daß sich bei der Erstellung von Büchern, Broschüren, Zeitungen und sonstigen Printprodukten durchgesetzt hat. Es dient der Durchsetzung von einheitlichen Strukturen und verbessert die Effizienz bei der Erstellung von Printprodukten, ebenso wie bei der Umsetzung von Internetseiten. Vor allem bei dynamischen Webanwendungen ist es ein unverzichtbarer Arbeitsschritt, da in einem CMS genau definiert werden muss, wo und wie sich Text, Bild und Videoanimationen in einer Seite kompositionieren. Folgende Parameter können zum Beispiel in einem Gestaltungsraster definiert werden:

• Format
• Randeinstellungen (sprich Abstände)
• Spaltenbreite, -abstand, -höhe, -linien
• Schriften
• Zeilenabstand
• Rahmenarten
• Farbdefinitionen
• Satzspiegel (hier werden die genauen Parameter für das Schriftbild festgeschrieben, wie z.B.: Spationierung, Schriftgröße, Wortabstand, etc. Viele dieser Parameter lassen sich in ausschließlich unter zu Hilfenahme von CSS im Web umsetzen. Was CSS bedeutet wird im weiteren Verlauf erläutert.)

Wie so ein Gestaltungsraster für das Web aussehen kann, kann man unter den folgenden URLs sehen:

1. www.kommdesign.de
2. www.wdrdesign.de
3. www.lankau.de
4. www.ard-design.de

2.2.1 Wozu Gestaltungsraster?

• Die Regelmäßigkeit in der Seitenstruktur führt zu einer verbesserten Informationsaufnahme des Nutzers
• Verbesserung der Orientierung beim Benutzer
• Trennung von Inhalt und Layout durch sog. Design-Templates
• Starke Vereinfachung der Seitenproduktion durch genaue Vorlagen
• Führen Sie den Blick des Betrachters, überlassen Sie Ihn nicht dem Zufall
• Einhaltung der Corporate Identity
• Einhaltung der sog. "Gestaltgesetze" wird verbessert

Fazit: Binden Sie alle Elemente in das Gestaltungskonzept mit ein. Keine Grafik und kein Element der Seite werden für sich betrachtet. Alle Elemente wirken im Kontext der benachbarten Flächen, Formen und Farben. Sorgen Sie dafür, dass der optische Gesamteindruck harmonisch wirkt, dass Wirkung und Anmutung "aus einem Guss" gestaltet sind. Selbstredend im Gesamtkonzept der Unternehmens-CI und mit dem Fokus auf den Nutzen, den Anbieter und Benutzer der Webseiten haben sollen.

2.2.2 Besonderheiten eines Multimedia-Gestaltungsrasters:

• Screens müssen in die 3. Ebene hinein geplant werden (Hintergrund vs. Vordergrund)
• Physikalische Eigenheiten des Monitors (Auflösung, versch. Größen, Farben, etc.)
• Zusätzliche Stellgrößen wie der Raum für Navigationselemente, das Verhalten von Links (visited, mouse-over, etc.), bewegte Bilder (Animationen, Streaming Media, etc.)

Zusätzlicher Hinweis: Ein Gestaltungsraster kann sich ändern, d.h., wandeln oder anpassen, aber gleichartige und sinnverwandte Seiten sollten in jedem Fall dasselbe Gestaltungsraster besitzen!


2.3 Gestaltgesetze

Die Gestaltgesetze wurden zu Beginn des 20. Jahrhunderts von einigen Psychologen zusammengetragen. Mit den Gestaltgesetzen werden die Gesetzmäßigkeiten bei der menschlichen Wahrnehmung beschrieben. Auf den folgenden Seiten werden wir Ihnen die wichtigsten vorstellen. Zum Beispiel "Welche Navigation können Sie schneller erfassen?"

• Hier gilt das "Gesetz der Nähe":
  Nahe beieinander liegende Teile werden als zusammengehörend empfunden.
  Ergo: Gruppieren Sie zusammengehörende Elemente räumlich nahe beieinander.
  Gründe: Die versch. Kategorien benötigen Raum, um sich voneinander abzugrenzen, die Unterpunkte müssen nah am Oberpunkt liegen, um die Zusammengehörigkeit zu repräsentieren. Auf der rechten Seite ist alles zu gedrängt, um schnell erfasst zu werden.



• Gesetz der Ähnlichkeit:
  Einander ähnlich sehende Elemente werden eher als zusammengehörig erlebt als einander unähnlich sehende.
  Ergo: Markieren Sie zusammengehörende Elemente optisch ähnlich.
  
  Bsp:
  
  Die Ähnlichkeit kann hierbei auf Helligkeit, Farbe, Orientierung, Größe und/ oder Form bezogen sein.



• Gesetz der Geschlossenheit:
  Eine Fläche wird als Figur wahrgenommen, wenn sie von einer durchgehenden (oder sogar nur teilweise durchgehenden) Kontur eingeschlossen ist.
  Ergo:Beachten Sie auch die visuellen Elemente, die nur angeschnitten oder überdeckt werden.
  
  Bsp:
  
  
  



• Gesetz der guten Fortsetzung:
  Dinge, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden von unserer Wahrnehmung gruppiert, also als zusammengehörig aufgefasst.
  Ergo: Ordnen Sie zusammengehörende Elemente entlang einer Linie an.
  
  Bsp.:
  
  

3 Technische Standards Man unterscheidet 2 Kategorien von Schriften:

Serifenschrift und serifenlose Schrift.

Bsp:



Die Serifen sind die kleinen "Häkchen" an den Buchstaben. Sie haben u.a. die Aufgabe, die einzelnen Buchstaben stärker voneinander zu unterscheiden und jedem Buchstaben einen spezifischen Charakter zu verleihen.

Serifenschriften sind im allg. besser lesbar und erfassbar. Manchmal unterstreichen sie sogar die Bedeutung des Wortes!

Zur richtigen Verwendung von Schriften auf dem Screen sollten Sie die folgenden Dinge beachten:

• Serifenschriften erst ab einer Schriftgröße von 16 Punkt, da aufgrund der niedrigen Bildschirmauflösung und der Rasterung des Computerbildschirms können die kleinen Häkchen und Schnörkel nicht korrekt dargestellt werden.


• Schriftgröße sollte generell nicht unter 12 Punkt sein



• Pro Zeile maximal 40 bis 60 Buchstaben, je nach Schriftgröße (~10-12 Wörter)



• zwischen 1,5- bis 2-zeiliger Zeilenabstand (Durchschuss). Dadurch kann der Nutzer die nächste Zeile besser wieder finden!



• Kursivschriften und sonstige Schriftschnitte sparsam verwenden



• Formatierung als linksbündiger Flattersatz



• Keine ausschließlichen Texte in Grossbuchstaben

Aufkommende Problemfelder:

• Die Schriften werden vom aufrufenden System dargestellt (clientseitig)



• Der Nutzer kann in seinen Einstellungen Schriftgröße, etc. selbst bestimmen(Schriftgrad groß, mittel, oder klein)



• Auflösung/Monitorgröße nehmen Einfluss auf die Darstellung.

Die benutzte Schrift muss also im System vorhanden sein ansonsten wird die Standardsystemschrift verwendet, um den Text darzustellen. Das kann unabsehbare Folgen für Gestaltungsraster, Umbrüche, Lesbarkeit und Spaltenbreite haben.

Die Ausnahme bilden proprietäre Anwendungen wie Macromedia Flash und Adobe Acrobat Reader, die die verwendeten Schriften in den Dateien miteinbinden.

Tip: Designentwürfe auf verschiedenen Systemen mit unterschiedlicher Auflösung, Monitorgröße und Helligkeit testen.

Frage: Warum so wenig Standardschriften auf den Betriebssystemen?

Antwort: Weil die Schriften sehr viel Speicherplatz (für damalige Verhältnisse in den 60/70ern) brauchten und Schriftdarstellung RAM kostete hinzu kamen die hohen Lizenzgebühren die für kommerzielle Fonts aufzubringen sind.

Aus diesen Gründen müssen Web-Entwickler beim Design darauf achten, Schriftarten und -stile zu wählen, die von möglichst allen Clients richtig interpretiert werden.

Um mit den meisten Systemen kompatibel zu bleiben, gibt es derzeit nur folgende Font-Varianten im WWW:

• Courier New, Courier, monospace
• MS Serif, New York, serif
• Times New Roman, Times, serif
• MS Sans Serif, Geneva, sans-serif
• Verdana, Geneva, Arial, Helvetica, sans-serif
• Arial, Helvetica, sans-serif

Inzwischen gibt es sogar einige speziell für den digitalen Gebrauch entwickelte Schriftarten. Dazu gehören:

• Georgia
• Verdana
• Coinn
• Minion
• Myriad

Weiterführende Links:

1. www.drweb.de
2. www.webmasterpro.de
3. www.typo-und-layout-im-web.de
4. selfaktuell.teamone.de

3.1 CSS - der Standard für Schriftformatierung im Internet

CSS bedeutet die Abkürzung für "Cascading Style Sheets"

Css ist eine Formatierungsprache für Farbe, Schriftart, Schriftgröße, Spationierung, Wortabstände uvm. von Schriften in HTML-Dokumenten.
Es gibt dazu drei Möglichkeiten in der Deklarierung:

1. im -Bereich eines HTML-Dokuments
2. als externe Textdatei mit der Endung .css, auf die in einem HTML-Dokument verwiesen wird, oder
3. direkt als Tag-Attribut im HTML-Code

Diese Elemente können mit CSS zentral gesteuert werden:

• Schriftformatierung
• Schriftformatierung mit Schriftartendatei
• Abstände, Ränder, Ausrichtung
• Rahmen und Innenabstände
• Hintergrundfarben und -bilder
• Listen und Tabellen
• Pseudo-Formate
• Elemente positionieren
• Mehrspaltiger Textfluß
• Seitenlayout und Seitenumbruch
• Sound-Kontrolle für Sprachausgabe
• Cursor und Microsoft-Spezialfilter

Die Vorteile dabei sind, dass die Änderungen am Design an zentraler Stelle möglich werden und die Validität des HTML-Codes sichergestellt wird. Des Weiteren ist ein barrierefreies Webdesign möglich, da ältere Browsergenerationen den Code trotzdem interpretieren können, nur eben die Formatierungsinformationen nicht angewandt werden. Die Seiten können, aber trotzdem angezeigt werden. Wer mehr dazu wissen möchte findet auf folgenden Seiten weitergehendes Material:

1. w3C
2. css.fractulum.net
3. www.style-sheets.de
4. drweb.de

3.2 Bilder

Zur Darstellung von Bildern und Grafiken im Internet gibt es die drei wichtigen Grafikformate JPEG, GIF und PNG, die nachfolgend näher beschrieben werden.

3.2.1 JPEG
JPEG steht für Joint Photographic Expert Group und repräsentiert den Namen der Korporation, die das Format entwickelt hat. Der große Vorteil des JPEG-Formats ist die Möglichkeit der Darstellung von 16,7 Millionen Farben, da es mit dem gesamten Farbspektrum arbeitet. Daher eignet es sich besonders zur Darstellung von detailreichen Inhalten mit hoher Auflösung, vielen Farben oder feinen Nuancenabstufungen, z.B. Fotos und Grafiken mit feinen Farbverläufen. Nachteil dieses Formats ist, dass es mit Verlust komprimiert, d.h. je höher der Kompressionsfaktor, desto schlechter ist die Qualität des Bildes oder der Grafik. Weiterhin ist in diesem Format keine Transparenz möglich und bei jedem Abspeichern im JPEG-Format gehen Bilddaten verloren. Daher ist es empfehlenswert, Änderungen an Foto oder Grafik im Originalformat vorzunehmen.

Das Ziel beim Umwandeln von Grafiken in das JPEG-Format ist die Nutzung einer möglichst hohen Kompressionsrate, dabei aber die Qualität der Grafik gleichzeitig hoch zu halten. Die Kompressionsmethode basiert auf dem Prinzip, vor allem die Farbinformationen zu verringern und dabei die Helligkeitsinformationen weitgehend unberührt zu lassen. Dem liegt die Feststellung zugrunde, dass unser Auge weniger auf Farb- als auf Helligkeitsveränderungen sensibilisiert ist. Die Kompression verbessert sich, je mehr weiche Farbübergänge vorhanden sind und wird immer auf eine Gruppe von 8x8 Pixel angewendet.

Zur Darstellung der Grafiken im Internet gibt es zwei Möglichkeiten des Bildaufbaus beim Laden. Zum einen wird die Grafik von oben nach unten aufgebaut, wobei lediglich die bereits geladenen Bildteile sichtbar werden. JPEG besitzt aber die Möglichkeit beim Abspeichern die progressive Option (Interlacing) einzubeziehen. Hierbei wird das Bild in mehreren Ladevorgängen aufgebaut und ist anfangs verschwommen und wird mit jedem Ladevorgang schärfer. Diese Methode hat den Vorteil, dass das zu ladende Bild von Anfang an zu sehen ist.

3.2.2 GIF
GIF bedeutet Graphics Interchange Format und wurde vom Online-Anbieter CompuServe eingeführt. Das GIF-Format besitzt eine maximale Farbtiefe von 8 Bit und kann somit höchstens 256 Farben darstellen. Daher eignet sich dieses Format besonders für Vorlagen mit wenigen Farben und großen gleichfarbigen Flächen, z.B. Logos, Schriftzüge, Symbole und Karikaturen. Außerdem lassen sich mit GIFs Animationen (animierte GIFs) erzeugen, wo mehrere Grafiken in einer einzigen Grafikdatei gespeichert und zu kleinen Filmen zusammengefasst werden.

Beim GIF-Format besteht auch die Möglichkeit, innerhalb eines Bildes transparente Bereich zu definieren. Damit kann man Teile des Bildes unsichtbar machen, um z.B. Symbole in die Hintergrundfarbe der Website einzuflechten.

Die Kompression verläuft anders als bei JPEG verlustfrei. Beim Abspeichern von Grafiken im GIF-Format werden jene 256 Farben indiziert, d.h. in Speicherstellen geschrieben, welche das Bild so gut wie möglich erscheinen lassen. Bei der Kompression wird die Technik des Dithering verwendet, wobei optisch mehr Farben erzeugt werden, als in der indizierten Farbpalette vorhanden sind. Dazu werden die indizierten Farben so gruppiert, dass das menschliche Auge meint, mehr Farben zu erkennen. Außerdem wird eine Mustererkennung durchgeführt, die gleiche Farbmuster innerhalb des Bildes sucht und zusammenfasst. Je geringer also die Anzahl der Farben des Bildes ist, desto stärker kann die Komprimierung die Dateigröße reduzieren.

3.2.3 PNG
Das PNG-Format (Portable Network Graphics) wurde eigens für den Einsatz im Web mit dem Ziel entwickelt, die Fähigkeiten von JPEG und GIF in sich zu vereinen und eine Antwort auf die Einschränkungen der beiden Formate zu geben.

PNG kann alle 16 Millionen Farbwerte darstellen und komprimiert wie GIF verlustfrei. Der Kompressionsalgorithmus arbeitet ähnlich wie der des ZIP- Formats, wobei Wiederholungen von Pixelmustern im Bild durch Meta-Informationen ersetzt werden. Die Kompressionsrate ist vor allem bei Grafiken wie Cliparts und Schriftzügen sehr gut, weniger aber bei Fotos und Grafiken mit vielen feinen Farbübergängen. PNG kann auch transparente Farben darstellen, aber anders als GIF mit nur einer Transparenzstufe, verfügt PNG über 256 Transparenzstufen. Weiterhin erlaubt PNG das Abspeichern von Informationen wie Bildtitel, Bildautor, Copyright und Erstellungsdatum.

Das PNG-Format hat aber auch Nachteile. So sind PNG-Dateien meist etwas größer als vergleichbare JPEG- oder GIF-Dateien. Die Möglichkeit zur Erstellung von Animationen wie bei GIF besitzt dieses Format ebenfalls nicht. Aber das größte Problem von PNG ist die geringe Unterstützung durch die Software. Die PNG-Bilder können nur von neueren Browsern ab Version 4 ohne Plug-In dargestellt werden. Dadurch konnte sich das Format bisher kaum durchsetzen.

3.3 Audio

Bei den Übertragungsarten von Audioformaten im Internet kann man nach Download und Stream unterscheiden. Beim Download wird die Audiodatei auf die die Festplatte gespeichert und kann erst nach dem kompletten Download betrachtet werden. Der Stream zeichnet sich durch einen kontinuierlichen Datenstrom aus und das Audiosignal wird bereits nach kurzer Zeit gestartet. Das wichtigste Audioformat beim Download ist MP3, beim Stream sind es RAM (Real Audio Media) und WMA (Windows Media Audio).

3.3.1 MP3
MP3 steht für MPEG1 Audio Layer 3 und ist Teil der Motion Picture Expert Group (MPEG) Standards zur digitalen Kompression von Audio- und Videosignalen. Entwickelt wurden die MPEG-Standards am Fraunhofer Institut für integrierte Schaltungen in Erlangen. Die Grundlagenforschung begann dort in den frühen 80er Jahren. Der Durchbruch von MP3 begann dann mit der Verbreitung des Internets Mitte der 90er Jahre.

Der größte Vorteil von MP3 ist die geringe Dateigröße, beispielsweise gegenüber dem Wave-Format, bei nahezu gleicher Qualität. Die Dateigröße von MP3 beträgt etwa nur 10% der Originalgröße der Audiodatei. Die Komprimierung erfolgt dabei verlustbehaftet. Bei der Komprimierung werden die Sounddateien verschiedenen Analysen unterzogen, was auch Sampling genannt wird. Die Sampling-Rate ist die Frequenz, mit der die Töne untersucht werden, und die Sampling- Auflösung bezieht sich auf die Menge der Informationen über das einzelne Sample, das in die Audiodatei gespeichert wird. Bei CDs wird das Sampling von Audios mit einer Sampling-Rate von 44,1 Kilohertz (kHz) und einer Auflösung von 16 Bits pro Sample durchgeführt.

Ziel der Analyse ist es, möglichst treffsicher die Töne wegzulassen, die von lauteren Tönen verdeckt werden und somit für das menschliche Ohr kaum wahrnehmbar sind. Diese kaum wahrnehmbaren Töne nehmen nur unnötigen Speicherplatz ein, der bei der Umwandlung in MP3 freigegeben wird. Bei der Komprimierung gibt es verschiedene Qualitätsstufen. Eine Bitrate von 128 kbps erreicht nahezu CD-Qualität, empfohlen sind 192 kbps, da es eine bessere Qualität bei kaum höherem Speicherbedarf bietet. Zusätzlich zu den Audioinformationen können noch weitere Informationen in sogenannten Tags aufgenommen werden. Dies kann z.B. der Name des Interpreten, der Liedname, Erscheinungsjahr und Musikrichtung sein.

Ein weiterer Vorteil von MP3 ist die Plattformunabhängigkeit, da es sich praktisch auf jedem Betriebssystem nutzen lässt, sowie in portablen und stationären MP3-Playern zum Einsatz kommt.

3.3.2 Real Player
Der Real Player ist ein von Real Networks entwickeltes Programm zum Abspielen von speziellen Audio- und Videodateien (Real Audio Media RAM).

Diese RAM-Dateien sind sehr klein und sind deshalb besonders für das Streaming geeignet. Die Dateien werden ins RAM-Format codiert und beim User durch den Real Player decodiert. Dabei hat die zur Verfügung stehende Bandbreite einen großen Einfluss auf die Abspielqualität. Das beim Real Player integrierte Surestream-Verfahren passt den Datenstrom während der Übertragung automatisch einer wechselnden Bandbreite an. Je nach zur Verfügung stehender Bandbreite werden entsprechend viele Daten übertragen. Neben dem RAM-Format kann der Player auch andere Formate wie MP3, wav, avi und midi abspielen.

3.3.3 Windows Media Player
Der von Microsoft entwickelte Media Player nutzt das WMA-Format (Windows Media Audio). Die WMA-Dateien sind sehr resistent gegen Signalabschwächung, die durch Datenverluste verursacht wird und ist somit sehr gut für das Streaming geeignet. Dieses Format hat außerdem eine bessere Komprimierung als andere Formate und benötigt deshalb weniger Bandbreite. Bei wechselnden Bandbreiten kann der Datenstrom aber lediglich gesenkt. Wenn wieder mehr Bandbreite zur Verfügung steht kann der Datenstrom aber nicht wieder erhöht werden, wie dies beim Real Player möglich ist. Der Media Player ist auch in der Lage, Sounds mit einer Tiefe von 24 Bit und einer Abtastrate von 96 kHz abzuspielen, was Dolby-Digital-Qualität entspricht. Neben dem eigenen WMA-Format kann der Media Player auch alle anderen gängigen Audio- und Videoformate anspielen. 3.4 Video

Ein entscheidender Faktor von Videos im Internet ist die Dateigröße, weil es von ihr abhängt wie schnell ein Video für den Betrachter zur Verfügung steht. Die Dateigröße eines Videos ist im Allgemeinen abhängig von der Länge des Videos, dem Kompressionsverfahren und von der Auflösung bzw. von dem Format, welches vor allem bei Stream-Videos eine entscheidende Rolle spielt. Während man die Länge eines Videos nur durch Kürzung des Filmmaterials realisieren kann, gibt es bei der Kompression verschiedenen Ansätze und Standards.

3.4.1 MPEG
Die wohl bekanntesten Standards sind die der MPEG-Gruppe. MPEG ist die Abkürzung für "motion pictures experts group". Von dieser Gruppe wurden bzw. werden Dateiformate und Verfahren zum Platz sparenden Komprimieren und Speichern von Video- bzw. Multimediadaten in hoher Qualität festlegt.

MPEG wurde 1988 von der "International Organization for Standardization", kurz ISO, gegründet.

Die bekanntesten Standards dieser Gruppe sind MPEG 1 bis MPEG 4:

MPEG1 wurde für flüssige Video-Wiedergaben entworfen und weist daher die größten Kompressionsraten auf: 25 Frames pro Sekunde, Auflösung von 352 x 288 Pixel, 1,2 bis 3 MBits/s Datenrate. MPEG2 kann besser mit dem beim Fernsehen eingesetzten Zeilensprungverfahren (Interlace) umgehen (höhere Kompression) 25 Frames pro Sekunde, Low-Auflösung 352 x 288 Pixel bis zu 4 MBits/s bis High-Auflösung 1920 x 1152 Pixel bis zu 80 MBits/s. MPEG3 war für High Definition TV-Qualität (HDTV) vorgesehen und wurde mittlerweile in den MPEG-2- Standard implementiert. MPEG4 war ursprünglich als ein Codierungsstandard für audiovisuelle Daten mit sehr niedriger Bitrate gedacht.

Neben den MPEG Kompressionsverfahren gibt es auch so genannte Container Formate, welche eine Art Spielraum für die Kompression bieten. D.h. die komprimierten Audio- und Videodaten in diesen Formaten können in verschiedenen Codecs vorliegen. Codecs sind Komprimierungsverfahren die zum Teil auf den MPEG Standards basieren.

Der wohl bekannteste Container ist der AVI Container:
AVI steht für "Audio Video Interleave". D.h., dass die Audio- und Videodaten ineinander verzahnt, also "interleaved" abgespeichert werden. Der bekannteste Codec der auf AVI aufbaut ist der Divx. Bei dieser Art von Kompression muss man beachten, dass die Codecs auch auf dem Zielrechner vorhanden sein müssen, da der Codec beim abspielen wieder decodiert werden muss. Entwickelt wurde der AVI Container von Microsoft als einheitliche Lösung zur Wiedergabe von kurzen Video Clips. AVIs haben immer die gleiche Dateiendung (.avi), was im Container steckt ist allerdings von AVI zu AVI verschieden.


3.4.2 Videoübertragung im Internet
Prinzipiell kann man von zwei Arten der Übertragung im Internet sprechen, dem Download und dem Stream. Im folgendem werden die beiden Übertragungsarten kurz erläutert.

3.4.3 Download
Bei einem Download wird das Video komplett auf der Festplatte gespeichert. Dies benötigt je nach Länge und Qualität des Filmes, mehr oder weniger viel Festplattenplatz. Zum Abspielen der Videos wird eine spezielle Software benötigt. Die meisten dieser Softwareprodukte können mittlerweile alle gängigen Formate abspielen.

Die Wiedergabequalität ist im Vergleich zum Stream nicht von der Bandbreite abhängig, die Downloadzeit hingegen schon. Filme die man Downloaden muss, können in der Regel erst nach dem sie komplett auf der Festplatte vorhanden sind, angesehen werden.

3.4.4 Stream
Stream ist die heute gängige der Videoübertragung im Internet, weil kein Download benötigt wird und der Empfänger schon nach einigen Sekunden Bild und Ton hat.

Bei dieser Technik handelt es sich um einen kontinuierlicher Datenstrom, d.h. das Video kann nur so lange betrachtet werden wie eine Verbindung ins Internet besteht. Streams werden Codiert über das Internet übermittel und am Endgerät erfolgt eine sofortige Decodierung des Videos. Die Codierung ist nötig da die Video Datei sonst zu groß für eine Übertragung wäre. Decodiert wird die Datei durch eine spezielle Software, meist ein Plugin. Die Wiedergabe ist abhängig von der Bandbreite. Aus diesem Grund ist es sinnvoll die Filme in verschiedenen Qualitäten bereit zu stellen, damit auch User mit geringer Bandbreite in den Genuss des Videos kommen können.

3.4.5 De facto Standards
Zur Zeit gibt es drei relevante Formate für Videos im Internet. Die großen Softwareentwickler haben sich nicht hundertprozentig an die Standards der MPEG-Gruppe gehalten, sondern folgende eigene entwickelt. Diese Formate sind so zusagen "Quasi-Standards".

wmf (Windows Meta File) Format der Firma Microsoft rm (Real Media File) Format der Firma Real Networks mov (Move File) Format der Firma Apple

Inzwischen gibt es immer mehr Programme die alle oder zumindest zwei der Formate abspielen könne, allerdings kann man noch nicht erwarten dass jeder User über solch eine Software verfügt. Aus diesem Grund sollte man alle drei Formate berücksichtigen.

4 Fazit

Abschließend ist zu sagen, dass es keinen einen Standard gibt, sondern einen Spielraum der einzuhalten ist.

Der Grund hierfür ist in der Masse der Anwender und der Verbreitung unterschiedlicher Systeme zu finden.

Man muss daher alle Eventualitäten abdecken um sicherzustellen dass man keine Barrieren aufbaut und dadurch Nutzer von seinem Webauftritt ausschließt.

Aus unserer Sicht könnte man sagen, dass man mit einheitlichen Standards, die auch von den Softwareherstellern eingehalten würden, Kosten sparen und gleichzeitig Sites liefern könnte, die für mehr Menschen und mehr Arten von Zugangsgeräten zugänglich sind.

Jens Lachenmaier, Marcel Ochmann, Tobias Kleck

  © Fachhochschule Stuttgart - Hochschule der Medien (HdM) 2003