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

© 2005  Impressum