SELFHTML/Navigationshilfen  Grafik
	Grafikformate f�r Web-Seiten
	Allgemeines zu Grafikformaten f�r Web-Seiten  Das GIF-Format  Das JPEG-Format  Das PNG-Format  Das LuraWave-Format  Das SVG-Format

Allgemeines zu Grafikformaten f�r Web-Seiten

Im Web haben sich zwei Dateiformate f�r Grafiken auf breiter Front durchgesetzt, die von allen, auch den nicht so modernen Browsern "inline", also im eigenen Fenster angezeigt werden k�nnen: die Formate GIF und JPEG. Die St�rken beider Formate liegen jedoch auf unterschiedlichen Gebieten. Dazu kommt ein neues, viel versprechendes Format, das viele Vorteile von GIF und JPEG in sich vereint: das PNG-Format. Dieses Format wird von moderneren Browsern ebenfalls unterst�tzt, wenn auch noch uneinheitlich und oft nicht vollst�ndig. Daneben existieren noch andere, beachtenswerte L�sungen, die aber nur einen kleinen Benutzerkreis haben, weil sie bei Browsern ein Plugin ben�tigen - z.B. das Format von LuraWave. Eines aber haben all diese Formate gemeinsam: es sind pixelorientierte Formate. Vektorgrafik ist im Web dagegen noch eine Seltenheit. Das daf�r viel versprechendste Format, das auf XML basierende SVG-Format, entwickelte sich leider nur z�gerlich. Es bleibt die Hoffnung, dass es dennoch angenommen wird.

In diesem Abschnitt werden die genannten Grafikformate kurz vorgestellt.

Das GIF-Format

Dateien des GIF-Formats haben die �bliche Dateinamenendung .gif und den  MIME-Typ image/gif. In HTML lassen sich GIF-Grafiken mit Hilfe des img-Elements einbinden (siehe  Grafiken einbinden).

GIF steht f�r Graphics Interchange Format und wurde schon vor vielen Jahren vom Online-Anbieter CompuServe eingef�hrt. Es zeichnet sich durch eine hohe Kompression aus. Deshalb hat es sich im Online-Bereich, wo die �bertragung von Daten Geld und Zeit kostet, schnell durchgesetzt. Der heute weit verbreitete Standard des GIF-Formats ist das so genannte "89er-Format". Dieses Format bietet drei M�glichkeiten an, die das GIF-Format f�r den Einsatz im Web besonders interessant machen:

• Interlaced: Eine Grafik, die mit der Option "interlaced" abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Gerade beim Laden von Web-Seiten aus dem Netz ist das sehr hilfreich. Denn so erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Ladevorgang wird die Grafik dann immer deutlicher und feiner aufgel�st am Bildschirm angezeigt.
• Animation: Das GIF-Format bietet die M�glichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur zeitlichen Steuerung der Einzelgrafiken. Dadurch werden  animierte GIF-Grafiken m�glich.
• Transparente Farbe: Das GIF-Format arbeitet mit  Farbpaletten, also mit einer begrenzten Anzahl "indizierter Farben". Dabei besteht die M�glichkeit, eine dieser Farben als "transparent" zu definieren. Bei der Anzeige scheinen dann Elemente, die unterhalb der Grafik liegen, an den Stellen durch, wo die Grafik transparent ist. Einzelheiten zu den damit verbundenen M�glichkeiten werden im Abschnitt  Transparenz einer bestimmten Palettenfarbe beschrieben.

Ein Nachteil des GIF-Formats ist, dass es maximal 256 Farben pro Datei speichern kann. Ein Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren. Aufgrund dieser Charakteristika ist das GIF-Format f�r hoch aufl�sende Grafiken wie Fotos nicht so sehr geeignet. Ideal ist das GIF-Format dagegen f�r typische Web-Grafiksorten wie  Buttons,  Dots,  Bars,  Symbole und  Cliparts.

Leider ist auch das GIF-Format nicht mehr ganz frei vom Schmutz der Abzockversuche im Internet. Die Firma Unisys, die urspr�nglich den LZW-Algorithmus patentierte, den das GIF-Format benutzt, wirbelte Ende 1999 viel Staub auf, als sie bekannt gab, juristisch gegen nicht lizenzierte GIF-Grafiken im Web vorzugehen. Angesichts der Tatsache, dass es wohl in etwa so viele GIF-Grafiken im Web gibt wie Menschen auf der Erde, war dieses Vorhaben allerdings nicht besonders realistisch. Anbieter von Grafik-Software, die das GIF-Format unterst�tzt, sind allerdings lizenzpflichtig und werden auch kontrolliert. Deshalb gibt es vor allem in Freeware-Kreisen noch mancherorts Proteste und Aufrufe, das GIF-Format nicht mehr zu verwenden.

Das JPEG-Format

Dateien des JPEG-Formats haben die �bliche Dateinamenendung .jpg, .jpeg oder .jpe und den  MIME-Typ image/jpeg. In HTML lassen sich JPEG-Grafiken mit Hilfe des img-Elements einbinden (siehe  Grafiken einbinden).

JPEG steht f�r Joint Photographic Expert Group, also nicht der Name des Grafikformats, sondern der Name der Korporation, die das Format entwickelt hat. Das JPEG-Verfahren ist ein Kompressionsalgorithmus f�r Datenstr�me, der auf dem Algorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Das gleichnamige Dateiformat f�r Grafiken ist einfach eine Anwendung dieses Algorithmus auf Pixelgrafiken. Mittlerweile wird der JPEG-Algorithmus auch auf Videos angewendet und hat das beliebte Video-Format MPEG hervorgebracht.

Das JPEG-Grafikformat komprimiert wie das GIF-Format ebenfalls sehr gut und hat gegen�ber dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Es arbeitet deshalb nicht wie das GIF-Format mit Farbpaletten bestimmter Farben, sondern mit dem gesamten Farbspektrum. Der Nachteil bei JPEG ist, dass es mit Verlust komprimiert. Je h�her der Kompressionsfaktor, desto schlechter die Qualit�t der Grafik.

Beim JPEG-Format k�nnen Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen:

• DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie nur f�r die Anzeige in Web-Seiten ben�tigen, gen�gt ein Wert zwischen 70 und 100 dpi. Falls Sie die Grafik ausdrucken wollen, ben�tigen Sie allerdings deutlich mehr dpi.
• Kompressionsfaktor: Je h�her der Kompressionsfaktor, desto schlechter die Bildqualit�t. Je geringer der Kompressionsfaktor, desto gr��er die Datei.

Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farb�berg�ngen im Bild, also bei Ecken und Kanten von abgebildeten Gegenst�nden ("R�nder fransen aus"). F�r Bilder mit wenigen Farben, aber klaren Konturen, also z.B. f�r einfache Zeichnungen, scharfe Schriftz�ge usw. ist das JPEG-Format deshalb nicht geeignet. Seine St�rke zeigt das Format dagegen beim Abspeichern von Fotos und anderen Grafiken, in denen sehr feine Farbverl�ufe vorkommen. Selbst bei geringer Kompression sind die Dateigr��en schon um ein Vielfaches kleiner als etwa bei Bitmap-Grafiken. Sogar den Bildschirm f�llende Fotos lassen sich mit JPEG bei brauchbarer Qualit�t auf Dateigr��en bringen, die im Web als akzeptabel gelten k�nnen.

Es gibt eine Variante von JPEG-Grafiken, so genannte "progressive JPEG-Grafiken". Dabei wird, �hnlich wie beim GIF-Format in der Variante "interlaced", zuerst eine vollst�ndige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden Web-Browser �bertragen wurden.

Das PNG-Format

Dateien des PNG-Formats haben die �bliche Dateinamenendung .png und den  MIME-Typ image/png. In HTML lassen sich PNG-Grafiken mit Hilfe des img-Elements einbinden (siehe  Grafiken einbinden), wahlweise aber auch mit den Elementen embed oder object.

PNG bedeutet Portable Network Graphic (ausgesprochen: PING). Es handelt sich um ein Grafikformat, das eigens f�r den Einsatz im Web konzipiert wurde und dessen Normierung wie diejenige von HTML, CSS, XML und andere Web-Technologien vom W3-Konsortium besorgt wird. Die Empfehlung (Recommendation) des W3-Konsortiums zu PNG stammt aus dem Jahr 1996. Das entsprechende Dokument ist unter dem Titel  PNG (Portable Network Graphics) Specification auf den Seiten des W3-Konsortiums zu finden.

PNG soll die Vorteile von GIF und JPEG in sich vereinen und zeichnet sich durch folgende Charakteristika aus:

• Verlustfreie Kompression: PNG komprimiert verlustfrei wie das GIF-Format. Der eingesetzte Kompressionsalgorithmus arbeitet dabei �hnlich wie der des ZIP-Formats. Wiederholungen von Pixelmustern im Bild werden durch Meta-Informationen �ber diese Muster ersetzt, was vor allem bei Grafiken wie Cliparts, Schriftz�gen usw. zu hohen Kompressionsdichten f�hrt. Weniger stark greift dieser Algorithmus dagegen bei Fotos und Grafiken mit vielen feinen Farb�berg�ngen. Das ist ganz �hnlich wie beim Komprimieren von Daten zu ZIP-Dateien, wo sich Bin�rdateien mit wenigen erkennbaren Byte-Mustern weniger stark komprimieren lassen als z.B. Textdateien.
• Farbtiefe plus Transparenz: PNG unterst�tzt wie das JPEG-Format 16,7 Mio. Farben, wahlweise aber auch das Abspeichern mit indizierten Farben, also mit einer begrenzten Farbpalette. So bleibt das Format flexibel und ist f�r alle Arten von Grafiken nutzbar. Neben den drei Farbwerten f�r Rot, Gr�n und Blau kann das PNG-Format zus�tzlich noch einen vierten Wert pro Pixel speichern, n�mlich den Alphakanal. Der Alphawert speichert den Transparenzgrad des Pixels. Auf diese Weise werden deutlich feiner abgestufte Transparenz-Effekte m�glich, als es mit dem GIF-Format m�glich ist.
• Interlaced-Funktion: Wie das GIF-Format und auch das JPEG-Format in der Variante "progressive" unterst�tzt PNG das schichtweise Aufbauen der Grafik (Interlaced-Funktion). Bei PNG gen�gen bereits 1-2% �bertragene Daten, um das Bild schemenhaft anzeigen zu k�nnen.
• Informationen zur Gammakorrektur: das PNG-Format erlaubt das Abspeichern einer Reihe von Zusatzinformationen zum Bild, darunter den Gammawert, der z.B. bei der Aufnahme eines Fotos ma�geblich war. Web-Browser, die das Bild anzeigen, k�nnten diese Information beispielsweise dazu nutzen, um bei der Anzeige des Bildes eine automatische Gammakorrektur abh�ngig vom eingesetzten Bildschirm und Betriebssystem vorzunehmen. Dieses Feature kann vermeiden helfen, dass ein und dieselbe Grafik auf verschiedenen Bildschirmen und unter verschiedenen Betriebssystemen oft so unterschiedlich aussieht.
• Informationen zu Bildherkunft und Copyright: das PNG-Format erlaubt das Abspeichern von Textfeldern zu Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum, Erstellungs-Software, Datenquelle sowie zu rechtlichen und sittlichen Absicherungshinweisen.

Animierte Grafiken wie beim GIF-Format sind mit dem PNG-Format allerdings nicht m�glich.

Es gibt also insgesamt viele Gr�nde, die f�r das PNG-Format sprechen. Weniger als Konkurrenz zum JPEG-Format (JPEG komprimiert bei Fotos doch deutlich st�rker als PNG - die PNG-Dateigr��en hoch aufl�sender Fotos sind nicht sonderlich web-freundlich), aber als Konkurrenz zum GIF-Format, das seit dem lizenzrechtlichen Hahn-im-Korb-Gebaren von Unisys etwas ins Zwielicht geraten ist. Das gr��te Problem von PNG ist eigentlich nur die z�gerliche Unterst�tzung bei der Software. Zwar unterst�tzt Netscape das PNG-Format seit der Produktversion 4.04, und auch der Internet Explorer kann PNG-Grafiken seit Version 4.0 anzeigen. Auch immer mehr Grafikprogramme beherrschen das PNG-Format. Doch gab es dann bei einzelnen Zwischenversionen der Browser wieder Ausf�lle bei der PNG-Unterst�tzung. Auch wurde das Format nicht vollst�ndig unterst�tzt usw. Deshalb - und nat�rlich auch aus der Gewohnheit heraus - tut sich das PNG-Format noch schwer gegen das GIF-Format.

Das LuraWave-Format

Dateien des LuraWave-Formats haben die �bliche Dateinamenendung .lwf und den  MIME-Typ image/x-wavelet. In HTML lassen sich LuraWave-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe  Objekte einbinden und  Multimedia einbinden (Netscape)).

LuraWave ist ein Dateiformat der Firma LuraTech f�r Pixelgrafiken. Es eignet sich vor allem f�r hoch aufl�sende Grafiken, also Fotos und Bilder mit feinen Farb�berg�ngen. Bei solchen Grafiken macht sich der besondere Kompressionsalgorithmus bemerkbar, den das LuraWave-Format verwendet, und der den Algorithmen von JPEG und PNG �berlegen ist. Der Lura-Algorithmus, der mit sogenannter Wavelet-Kompression arbeitet, bewahrt im direkten Vergleich mit JPEG bei einer gleichen Dateigr��enreduktion eines Originalbildes eine deutlich bessere Bildqualit�t als das JPEG-Format. Neben der besonders guten Kompression verf�gt das LuraWave-Format �ber weitere Besonderheiten:

• Skalierbare Gr��e: Aufgrund des Wavelet-Kompressionsalgorithmus ist es m�glich, �hnlich wie bei einem Hologramm das Gesamtbild aus einem kleinen Teil davon zu rekonstruieren. Das erlaubt es, eine LuraWave-Grafik zu zoomen, also zu vergr��ern, ohne dass die Grafik dadurch gleich unansehnlich pixelig wird.
• Passwortschutz: LuraWave-Grafiken lassen sich in der Weise mit einem Passwort sch�tzen, dass eine qualitativ minderwertigere Bildvariante �ffentlich betrachtbar ist, w�hrend eine qualitativ hochwertigere Variante nur gegen Eingabe eines Passworts anzeigbar und bearbeitbar ist.

Zum Erstellen von LuraWave-Grafiken ist LuraWave-Software erforderlich. Die Software gibt es in Form von Plugins f�r bekannte Produkte wie Photoshop, Cumulus oder Paintshop Pro. Solche Programme k�nnen dann Grafiken als lwf-Dateien abspeichern. Es gibt auch ein separates Tool von LuraWave, das andere Grafikformate wie JPEG, BMP, TIFF usw. einlesen und die Grafiken dann im lwf-Format abspeichern kann. Die Plugins f�r die Profiprogramme und die Profiversion des separaten Grafiktools sind kostenpflichtig, eine Light-Version des separaten Tools ist kostenlos. Kostenlos sind ferner die leider erforderlichen Browser-Plugins. Infos zu den Produkten und Downloadm�glichkeiten gibt es auf den Web-Seiten von  LuraTech.

Das LuraWave-Format ist also eine technisch interessante Alternative vor allem zum JPEG-Format. Nachteil ist, dass es kein offener Standard ist, von bestimmter Software abh�ngig ist und von Web-Browsern nicht von Haus aus, sondern nur nach der Installation des Plugins unterst�tzt wird.

Das SVG-Format

Dateien des SVG-Formats haben die �bliche Dateinamenendung .svg oder svgz und den  MIME-Typ image/svg+xml. In HTML lassen sich SVG-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe  Objekte einbinden und  Multimedia einbinden (Netscape)).

SVG bedeutet Scalable Vector Graphics. Es ist das einzige vektorgrafische der hier vorgestellten Formate. Im Gegensatz zu klassischen Formaten dieser Art, die in der Regel an kommerzielle Software gebunden sind, ist das SVG-Format eine Entwicklung des W3-Konsortiums und genauso wie andere dort normierte Sprachen, also wie HTML, CSS, XML und auch PNG, plattform�bergreifend, offen dokumentiert und frei verwendbar. Aktuelle Informationen und die Spezifikation von SVG finden Sie auf den Seiten des W3-Konsortiums �ber die Einstiegsseite  Scalable Vector Graphics (SVG).

Vektorgrafische Formate beschreiben nicht, welche Farbanteile ein Pixel im Bild hat, sondern sie beschreiben Objekte. Es gibt Objekte wie gerade und nach einem Algorithmus gekr�mmte Linien, runde und winklige Fl�chen, Text usw. All diese Objekte haben im Bild eine bestimmte Position und bestimmte Ausma�e, Farben und andere Eigenschaften. Fl�chen k�nnen einfach, mit einem Farbverlauf oder mit einem Bitmap-Muster gef�llt sein, 3D-Effekte und Farbfilter zugewiesen haben. Objekte k�nnen auch zu Objektgruppen zusammengefasst sein. In der Datei stehen dann nur die Beschreibungen der Objekte. Die anzuzeigende Grafik wird zur Laufzeit aus den beschreibenden Daten erzeugt.

Ideal ist diese Grafikform f�r das Web insofern, als die Beschreibungsdaten f�r vektorgrafische Objekte in der Regel viel weniger Speicherplatz ben�tigen als pixelorientierte Grafiken. Gerade f�r Grafiken, die Symbole enthalten, Logos oder Cliparts, w�re das SVG-Format eine sinnvolle Alternative zum GIF-Format. Ideal geeignet ist es f�r jede Art von technischer Grafik, f�r Illustrations- und Konstruktionsgrafik. Das SVG-Format zeichnet sich durch folgende besonderen Eigenschaften aus:

• XML-basiert: SVG ist eine  XML-basierte Sprache. Das Format ist dadurch jederzeit gegen eine DTD validierbar, und, was ganz wichtig ist - es ist ein Klartextformat. SVG-Grafiken sind daher z.B. f�r Suchmaschinen nach Textinhalten durchsuchbar. Ferner ist es problemlos m�glich, SVG-Grafiken dynamisch mit Scripts zu erzeugen, sei es serverseitig mit  CGI-Scripts, oder client-seitig mit einer Sprache wie  JavaScript. Mit Hilfe des Document Object Model (DOM) ist sogar der direkte dynamische Zugriff auf jedes Beschreibungsdatum einer SVG-Datei m�glich. SVG eignen sich deshalb z.B. hervorragend f�r interaktive Grafiken, bei denen ein Anwender in einem HTML-Formular Parameter eingibt, aus denen die Grafik dann zusammengestellt wird, oder f�r dynamisch erzeugte Balken- und Tortendiagramme zu Server-Statistiken.
• XLink-Unterst�tzung: XLink ist ein Schema zum Beschreiben von Verweisen (Hyperlinks) in XML. Auch auf SVG ist dieses Schema anwendbar. Dadurch ist es m�glich, verweis-sensitive SVG-Grafiken zu erstellen. Die Verweise k�nnen zu beliebigen lokalen oder weltweiten Zielen f�hren.
• Zoom- und Schwenkf�higkeit: Vektorgrafiken lassen sich verlustfrei zoomen. So k�nnen kleine Grafiken f�r sehschwache Menschen problemlos vergr��ert werden. Ebenso lassen sich solche Grafiken leicht drehen (schwenken).
• SMIL-Schnittstelle: SMIL ist ebenfalls eine vom W3-Konsortium normierte Sprache. Sie beschreibt Zeitschienen f�r multimediale Abl�ufe. Zusammen mit SMIL lassen sich dynamische SVG-Grafiken mit anderen Elementen wie Sound kombinieren.

Neuere Versionen bekannter vektorgrafischer Software-Produkte unterst�tzen das SVG-Format, so etwa CorelDraw ab Version 10. Andere, als erschwingliche Shareware-Programme vertriebene Produkte wie das Programm WebDraw des Herstellers Jasc, von dem auch das beliebte Pixelprogramm Paintshop Pro stammt, helfen ebenfalls beim Erstellen von SVG-Grafiken. Theoretisch gen�gt allerdings auch ein beliebiger Texteditor - so wie bei allen Klartextformaten der XML-Familie. Wer bereit ist, sich auf die SVG-Sprache einzulassen, kann tats�chlich mit Texteditor und SVG-Viewer ausger�stet SVG-Grafiken erstellen. Und SVG-Viewer gibt es kostenlos. Der bekannteste ist von Adobe. Der Adobe-Viewer l�sst sich auch als Browser-Plugin installieren. Auf diese Weise sind Browser wie Netscape oder der Internet Explorer in der Lage, SVG-Grafiken im Web anzuzeigen. Leider fehlt jedoch noch die native Unterst�tzung von SVG durch die Browser. Alles, wof�r der Anwender ein Plugin braucht, entwickelt sich nur z�gerlich. Eine im Browser eingebaute SVG-Unterst�tzung so wie f�r GIF und JPEG w�re daher dringend w�nschenswert. Denn das SVG-Format ist vermutlich die spannendste Entwicklung im Bereich Grafik, die derzeit �berhaupt stattfindet, und es eignet sich wie kaum ein anderes f�r etliche statische und dynamische Grafiksorten im Web.

	Typische Grafiksorten f�r Web-Seiten
	Downloadbare Schriftarten
SELFHTML/Navigationshilfen  Grafik

© 2007  Impressum