SELFHTML

Grafikformate für Web-Seiten

Informationsseite

nach unten Allgemeines zu Grafikformaten für Web-Seiten
nach unten Das GIF-Format
nach unten Das JPEG-Format
nach unten Das PNG-Format
nach unten Das LuraWave-Format
nach unten Das SVG-Format

 nach unten 

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.

nach obennach unten

Das GIF-Format

Dateien des GIF-Formats haben die übliche Dateinamenendung .gif und den Seite MIME-Typ image/gif. In HTML lassen sich GIF-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite 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:

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 Seite Buttons, Seite Dots, Seite Bars, Seite Symbole und Seite 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.

nach obennach unten

Das JPEG-Format

Dateien des JPEG-Formats haben die übliche Dateinamenendung .jpg, .jpeg oder .jpe und den Seite MIME-Typ image/jpeg. In HTML lassen sich JPEG-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite 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:

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.

nach obennach unten

Das PNG-Format

Dateien des PNG-Formats haben die übliche Dateinamenendung .png und den Seite MIME-Typ image/png. In HTML lassen sich PNG-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite 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 englischsprachige Seite 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:

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.

nach obennach unten

Das LuraWave-Format

Dateien des LuraWave-Formats haben die übliche Dateinamenendung .lwf und den Seite MIME-Typ image/x-wavelet. In HTML lassen sich LuraWave-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe Seite Objekte einbinden und Seite 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:

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 englischsprachige Seite 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.

nach obennach unten

Das SVG-Format

Dateien des SVG-Formats haben die übliche Dateinamenendung .svg oder svgz und den Seite MIME-Typ image/svg+xml. In HTML lassen sich SVG-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe Seite Objekte einbinden und Seite 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 englischsprachige Seite 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:

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.

 nach oben
weiter Seite Typische Grafiksorten für Web-Seiten
zurück Seite Downloadbare Schriftarten
 

© 2007 Seite Impressum