Die richtigen Grafikformate fürs Web

Fotos und Bilder lassen sich mittels Bildbearbeitung in unterschiedlichen Formaten (z.B. TIFF, BMP, WMF, PICT, EPS, PSD, XCF etc.) abspeichern. Die Liste ist lang, da es keine festen Standards in diesem Bereich gibt. Zudem greifen viele Software-Hersteller aus dem Grafikbereich gerne auf eigene Formate zurück. Grafikformat richtig wählen Für den Einsatz im Web sind die meisten Grafikformate hinsichtlich der Webseitenperformance nur bedingt geeignet. Generell sollen Bilddateien für das Web folgende Voraussetzungen erfüllen: eine problemlose Darstellung in allen Browsern eine Motivdarstellung in relativ guter Qualität bei gleichzeitig geringer Datenmenge Basierend auf den eben genannten Voraussetzungen befasst sich dieser Blog-Artikel mit den vier wichtigsten Dateiformaten für Webgrafiken (SVG, JPG, PNG und GIF) und erläutert kurz die jeweiligen Vor- und Nachteile. SVG-Grafikformat SVG bedeutet Scalable Vector Graphics. Es ist das einzige vektorgrafische der hier vorgestellten Formate und kann also beliebig skaliert werden ohne Verlust (ähnlich wie flash Dokumente). 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. JPG-Grafikformat Bilder im JPG-Format (auch JPEG) lassen sich stark komprimieren. Fürs Web kann man mit Komprimierungsstufen zwischen 40 - 70 % arbeiten (abhängig vom Motiv). Leider entstehen bei hoher Komprimierungsrate starke Qualitätsverluste, die sich vor allem bei Schriften oder harten Farbkanten bemerkbar machen. Zudem unterstützt das JPG-Format weder Transparenz noch Animation. Hier heisst es einfach ein wenig mit der Kompressionsrate spielen bis das Ergebnis passabel ist. Geeignet ist es vor allem für Fotos mit Farbverläufen oder feinen Tonabstufungen. Je mehr man bereit ist auf eine gute Qualität zu verzichten, desto geringer wird die Dateigrösse ausfallen. PNG-Grafikformat Immer häufiger zum Einsatz kommen auch PNG-Formate (png = Portable Network Graphics). Es wurde eigens für das Web konzipiert und soll die Vorteile von JPG und GIF vereinen. Ursprünglich war es als Ersatz für das GIF-Format gedacht, da der von GIF verwendete LZW-Kompressionsalgorithmus gesetzlich geschützt ist (eine kommerzielle Nutzung dieses Algorithmus erfordert die Zahlung von Copyright-Gebühren). Aufgrund der verlustfreien Komprimierung ist es jedoch auch gut anstelle des JPG-Formats einsetzbar. Dennoch ist es wichtig, dass PNG-Dateien korrekt fürs Web abgespeichert werden. Animationen sind mit dem PNG-Format nicht möglich. Dafür unterstützt es neben semitransparenten Bereichen auch Volltransparenz und ist in diesem Fall ein guter Ersatz für GIF-Bilder. Leider wird es immer noch nicht von allen Browsern unterstützt. Manche Browser stellen PNG-Bilder mit transparenten Bereichen falsch dar. GIF-Grafikformat Das älteste unter den im Web eingesetzten Grafikformaten ist das GIF-Format ( gif = Grafic Interchange Format ). Es ist ideal für Grafiken mit wenig Farbflächen wie es bei Logos oder Buttons der Fall ist. Es wird auch gerne für animierte Grafiken verwendet und unterstützt Transparenz. Aufgrund der Beschränkung auf maximal 256 Farben (8 bit Bild) ist es jedoch generell für Bilder mit Farbverläufe oder Farbfotos ungeeignet. Zusammengefasst gilt folgende Einsatzregel: Halbton, Fotos: JPG Logos, Strichbilder, zwingend verlustfreie Bilder: PNG Vektorgraphiken: SVG Animationen: Wenn nötig, dann SVG Flash: Vermeiden, interoperabilität ungenügend, Plugin benötigt, iphone/pad/board/mat inkompatibel. In naher Zukunft via SVG ...