Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Das richtige Grafikformat für den richtigen Zweck

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Das richtige Grafikformat für den richtigen Zweck

Grafiken sind eines der wichtigsten optischen Gestaltungsmittel von Webseiten. Zugleich haben sie durch Anzahl und Größe einen direkten Einfluss auf die Performance einer Webseite. Dirk Jesse und Stefan Nitzsche zeigen, welche Grafikformate sich für welche Anwendungszwecke eignen und wo die Stellschrauben für eine optimale Performance zu finden sind.

Grafiken sind ein unverzichtbarer Bestandteil des Web, sowohl für den Transport von Informationen als auch bei der Gestaltung von Webseiten. Eine durchschnittlich komplexe Webseite hat dieser Tage locker einen Umfang von zwischen 250–350 KB. Davon entfällt nicht selten der größere Teil auf Grafiken, der Rest verteilt sich auf HTML, CSS, JS usw. Im Durchschnitt reden wir also von Datenvolumina von 150 bis 250 KB und damit einem gewaltigen Optimierungspotenzial.

Grafikformate

GIF (Graphics Interchange Format)

Das GIF-Format, der Web-Oldie (GIF89a mit vollem Namen), legt Farbinformationen in einer Tabelle mit wahlweise 2–256 Farbwerten aus der 24bit RGB-Palette ab und komprimiert Bilddaten verlustfrei im LZW-Verfahren. Einzelne Farbeinträge können als transparent definiert werden, so dass der Hintergrund durchscheint – dadurch reduziert sich dann die Anzahl der effektiv vorhandenen Farben. Zwischenwerte (Alpha-Transparenz) sind dabei nicht möglich. Als weiteres Extra können mehrere Einzelbilder innerhalb einer Datei zu einer Animation kombiniert werden.

Durch einen Trick, der sogar standardkonform ist, lassen sich Fotos mit mehr als 256 Farben speichern – dazu wird das Feature ausgenutzt, dass die GIF89a-Spezifikation für jedes einzelne Frame einer Animation eine volle 8bit-Farbpalette erlaubt. Solche GIFs werden in Blöcken gespeichert, die wie Frames angelegt sind, aber nebeneinander dargestellt werden. Die Technik hat allerdings nicht in gängige Bildbearbeitungs-Software Einzug gehalten und wird auch von verschiedenen aktuellen Browsern trotz Standardkonformität nur unzureichend unterstützt.

JPEG (Joint Photographic Experts Group)

Das JPEG-Format, der zweitälteste Vertreter, verwendet verlustbehaftete Kompressionsalgorithmen (Tiefpass-Filter, Blockbildung, Quantisierung) und erreicht damit in der Regel deutlich höhere Komprimierungsraten. Das JPEG-Format wurde speziell für die Komprimierung von Fotos entwickelt und erreicht hier relativ problemlos Kompressionsraten von 75 % gegenüber dem Original – ohne sichtbare Auswirkungen auf die Bildqualität. Das Format unterstützt verschiedene Farbräume, wobei für die Anwendung auf Webseiten nur der 24bit-RGB-Farbraum und alternative 8bit-Graustufenbilder interessant sind.

JPEG 2000 (Joint Photographic Experts Group 2000)

Die Weiterentwicklung von JPEG, das Format JPEG 2000, konnte sich trotz zahlreicher Vorteile nicht durchsetzen. Dabei erreicht der Nachfolger eine bessere Komprimierungsrate bei gleichbleibender Qualität, bietet endlich per Spezifikation Raum für Metadaten und eine Unterscheidung von algorithmisch errechneten Bildregionen von potenziellem Interesse (ROI), die er in höherer Qualität kodiert. Außerdem gehört der störende Generationsverlust, der bei JPEG durch wiederholtes Öffnen/Speichern mit gleichen Kompressioneinstellungen entstand, endgültig der Vergangenheit an. Leider verhindern hohe Lizenzkosten eine Verbreitung in gängigen Bildbearbeitungsprogrammen und Digitalkameras, die außerdem noch unter dem hohen Rechenaufwand für die Kodierung zu leiden haben.

PNG (Portable Network Graphics)

Das PNG-Format ist quasi der Jungspund im Starterfeld. Das Format steht in direkter Konkurenz zu den Vorgenannten, denn es bietet eine sehr effiziente, verlustfreie Komprimierung, unterstützt sowohl 8bit Farbtabellen als auch eine 24bit-Vollfarbdarstellung. Komplettiert wird das Profil durch die Unterstützung eines zwischen 8bit und 16bit-kodierten Alpha-Transparenz-Kanals. Unterformate wie MNG und APNG (die beiden Ersatzformate für das animierte GIF), JNG oder PNG+ sind keine W3C-Empfehlungen und werden auch nur sporadisch unterstützt.

Ein wichtiger Vorteil des PNG-Formats ist seine Offenheit und Erweiterbarkeit. Aufpassen muss man beim Speichern von PNGs unter allen Photoshop-Versionen bis einschließlich CS2 – hier kommt es oft zu leichten Farbverfälschungen. Dieser Fehler wurde in Photoshop CS3 beseitigt. Die PNG-Spezifikation ist äußerst lesenswert, will man sich mit den Eigenheiten und versteckten Features von PNGs vertraut machen.

Jedes Töpfchen hat sein Deckelchen…

Wie in so vielen Situationen des täglichen Lebens gibt es auch beim Grafikeinsatz nicht DIE universelle, optimale Lösung. Wann welches Format zu Hochform aufläuft, richtet sich nach Art und Qualität des Bildmaterials und natürlich des Anwendungszweckes. Die folgenden Fallbeispiele orientieren sich an Standardaufgaben im Weballtag und versuchen, etwas Klarheit zu bringen:

Fotos

Im Web ist der unangefochtene Spitzenreiter nach wie vor das JPEG-Format. Es kann durch nahezu jede beliebige Bildbearbeitungssoftware geschrieben werden und bietet variable Einstellungsmöglichkeiten, über die man Qualität und Dateigröße beeinflussen kann. Für eine qualitativ gute Darstellung von JPEG-Grafiken im Internet sind Qualitätseinstellungen motivabhängig zwischen 45 und 60 (bezogen auf die Qualitätseinstellungen im Photoshop) vollkommen ausreichend und führen zu kleinen Dateigrößen bei guter Bildqualität. Wer den Photoshop nutzt, sollte JPEGs zudem immer über über den Menüpunk "Für Web und Geräte speichern…" ausgeben, denn hier werden gleichzeitig unnötige Chunks (Metadaten) aus dem Grafikformat entfernt.

Will man hingegen perfekte Farbtreue oder muss man die farblich exakte Übergänge zusammengesetzter Teilbilder gewährleisten, so kann es durchaus erforderlich werden auf die verlustfreien 24bit-PNGs umzusteigen.

Screenshots

Bei Screenshots fällt die Entscheidung schwer. Sind Foto-ähnliche, komplexe Strukturen enthalten, benötigt man oft eine mehr als 256 Farbwerte und somit die Echtfarbdaststellung, die man wahlweise mit dem JPEG- oder dem 24bit-PNG-Format erzielt. Motivabhängig gewinnt hier mal das eine oder das andere Format den Kampf um die kleinste Dateigröße.

Dominieren Linien, Flächen, Schrift und Verläufe, so kann man getrost auf das GIF- oder 8bit-PNG-Format setzen. Zum einen lassen sich sichtbare Farbabstufungen durch optionale Rasterungsalgorithmen vermeiden, zum anderen bewahrt die verlustfreie Komprimierung vor dem Verlust von Bilddetails. Und nicht zuletzt sind auch die Komprimierungsalgorithmen von GIF und PNG bei großen einfarbigen Flächen (z.B. Fensterhintergründe) äußerst effektiv.

Beispielgrafik Tortendiagramm

Tabelle 1: Dateigrößenvergleich Diagramme #1, 3D-Tortendiagramm
Grafikformat JPEG GIF PNG
Einstellungen 24 bit (Qualität: 75 %),
Hohe Qualität zur Vermeidung von Artefakten
8 bit (256 Farben)
mit Rasterung
8 bit (256 Farben)
mit Rasterung
Dateigröße 8,00 KB 10,3 KB 7,68 KB

Beispiel für ein Balkendiagramm

Tabelle 2: Dateigrößenvergleich Diagramme #2, Einfaches Balkendiagramm
Grafikformat JPEG GIF PNG
Einstellungen 24 bit (Qualität: 40 %),
Niedrige Qualität zur Minimierung der Größe
8 bit (128 Farben)
ohne Rasterung
8 bit (128 Farben)
ohne Rasterung
Dateigröße 13,0 KB 8,12 KB 5,64 KB
Schriften, Muster & Verläufe

Geht es um filigrane Strukturen, saubere Farbverläufe und Übergänge mit definierten Farbwerten, kommt man um eine verlustfreie Komprimierung nicht herum. Als Grafik eingebettete Schriften, Strichzeichnungen oder Hintergrundmuster verlangen saubere Details. In all diesen Fällen sollte man in keinem Fall zum JPEG-Format greifen. Die hohen Kontrastsprünge überfordern das JPEG-Format und provozieren hässliche Artefakte (optische Blockbildung) bei üblichen Kompressionsraten. GIF und 8bit-PNG-Format sind hier eindeutig überlegen. Denn neben der verlustfreien Komprimierung, welche für den Erhalt der filigranen Strukturen sorgt, ist es in 95 % der Fälle auch unnötig, derartige Grafiken im vollen 24bit-Farbspektrum zu speichern. Für einfarbige Schriften lässt sich trotz Farbabstufungen zur Kantenglättung die Farbpalette meist auf 8 bis 32 Farbwerte herunterrechnen und damit enorm viel Platz sparen.

Transparenz-Effekte

Transparenz ist die Domäne von GIF und PNG, wobei auch hier aufgrund der besseren Komprimierung das PNG-Format vorzuziehen ist. Das GIF bietet lediglich eine sehr eingeschränkte Form der Transparenz – ein Pixel kann entweder nur voll sichtbar oder komplett transparent sein. Ein typisches Problem bei dieser Art der Transparenz ist der so genannte "Ghosting"-Effekt. Eine grafische Struktur wird auf einem einfarbigen Hintergrund platziert und mittels Kantenglättung (Anti-Aliasing) ein sauberer, stufenloser Übergang zum Hintergrund erzeugt. Die ursprüngliche Hintergrundfarbe wird anschließend transparent geschaltet. Setzt man eine so bearbeitete Grafik später vor einen andersfarbigen oder deutlich helleren/dunkleren Hintergrund, so werden die Pixel aus dem Bereich der Kantenglättung deutlich sichtbar.

Wesentlich leistungsfähiger ist hier das PNG-Format. Sowohl die 8bit- (was weitgehend unbekannt ist), als auch die 24bit-Variante unterstützen Transparenz per Alphakanal in Qualitätsstufen zwischen 8bit und 16bit. In der 24bit-PNG-Variante ist der Alphakanal ein separater Kanal, der neben den RGB-Kanälen existiert und für jedes Pixel des Bildes eine Information kodiert (A), die besagt, wie stark an dieser Stelle der Hintergrund durchscheinen wird. In der 8bit-PNG-Variante ist die Transparenz an die einzelnen Farben gebunden, die in der Farbtabelle kodiert sind. Soll in einem Bild also der gleiche Rotton in drei verschiedenen Transparenz-Schritten enthalten sein, so wird man in der Farbtabelle eben diese Farbe dreifach wiederfinden, mit den dazugehörigen, unterschiedlichen Transparenz-Informationen. Die Tatsache, dass diese Transparenz-Variante so wenig verbreitet und fast gänzliche unbekannt ist, erklärt die offizielle PNG-Seite: »PNG supports alpha information with palette images as well; it’s just slightly harder to implement in a smart way.«. Allerdings existiert mit pngquant ein Konvertierungstool, zu dem es sogar eine WindowsGUI gibt. Die einzige bekannte Bildbearbeitungssoftware, die 8bit-RGBA-PNGs als Export ohne Umwege unterstützt, ist Adobe Fireworks.

Beispiel-Foto mit 8bit-Alphatransparenz

Tabelle 3: Dateigrößenvergleich Alphatransparenz
Grafikformat JPEG PNG PNG
Einstellungen 24 bit (Qualität: 60 %)
Vergleich: ohne Transparenz
24 bit mit
Alphatransparenz
8 bit (256 Farben) mit
Alphatransparenz
Dateigröße 22,3 KB 152 KB 47,1 KB

Der große Vorteil der 8bit-RGBA-PNGs ist die hervorragende Abwärtskompatibilität mit eingebauter Graceful Degradation für ältere Browser (insbesondere dem Internet Explorer 6), die halbtransparente Farben einfach durch Volltransparenz ersetzt. Hier tut sich die 24bit-PNG-Variante in der Verarbeitung durch ältere Browser durch unansehnliche graue Flächen hervor, wo eigentlich Transparenz zu finden sein sollte.

Auch für dieses Problem gibt es eine Lösung in Form des AlphaImageLoader Filters, einer proprietären Erweiterung von Microsoft. So richtig handhabbar wird dieser aber erst in Verbindung mit einem kleinen JavaScript, welches selbstständig alle Bilder einer Webseite automatisch korrigiert. David Maciejewski hat erst vor kurzem die aktuellen PNGFix-Varianten miteinander verglichen. In den ersten Versionen konnten diese Korrekturen nur auf Bilder angewandt werden, die per img-Element ins Layout eingebunden waren. In der aktuellen Version 2.0 alpha3 kann IE PNG Fix nun endlich auch Hintergrundbilder verarbeiten und unterstützt die CSS-Eigenschaften background-position und background-repeat, wodurch auch gekachelte PNGs nutzbar werden. Generell sind diese Fixes jedoch große Performance-Bremsen, weshalb wir empfehlen, die 8bit-Variante der Alpha-Transparenz einzusetzen, wo immer es möglich ist.

Performance erhöhen

Dateioptimierung

Obwohl Photoshop, IrfanView und andere Grafiktools bei sinnvoll gewählten Einstellungen bereits ordentliche Ergebnisse bei der Komprimierung von Grafiken erreichen, geht meist noch etwas mehr. Oftmals sind bei PNG-Grafiken noch Daten-Chunks enthalten, die für die Darstellung im Internet unbedeutend sind. JPEG-Dateien (vorwiegend Digitalfotos) enthalten oftmals Metadaten (Exif, IPTC-NAA), die innerhalb eines Seitenlayouts ebenfalls nicht benötigt werden.

PNGCrush ist ein schon etwas älteres Komandozeilentool, verrichtet seine Arbeit aber nach wie vor äußerst wirkungsvoll. Über Google findet man zudem zahlreiche Alternativen (z.B. OptiPNG), die teilweise auch mit einer grafischen Oberfläche aufwarten. Wesentlich komfortabler geht es mit dem Firefox-Plugin Smush.it. Dieses von den Yahoo Perfomance-Profis Stoyan Stefanov und Nicole Sullivan entwickelte Plugin speichert und optimiert selbstständig alle auf einer Webseite befindlichen Grafiken (GIF, PNG, JPEG) und liefert eine ZIP-Datei mit den optimierten Dateiversionen zurück.

CSS-Sprites

CSS-Sprites sind eine hervorragende Möglichkeit, HTTP-Requests – und damit Wartezeit – zu sparen und gleichzeitig die gefühlte Reaktionszeit der Webseite zu verbessern. Bei den beliebten Hover-Effekten hat dies zugleich die angenehme Begleiterscheinung, dass der Zustand ohne Verzögerung gewechselt wird, während eine echte Alternativgrafik erst vom Browser nachgeladen werden müsste.

Farbprofile

Was sich bei druckoptimierte Bildern größter Beliebtheit erfreut, ist im Web noch weitgehend (und oft unbeabsichtigtes) Neuland. Allerdings ist diese Neuland Quelle für einige Darstellungsprobleme und -unterschiede in verschiedenen Browsern. Bettet man unabsichtlich ein Farbprofil in eine Grafik ein, die später im Browser dargestellt werden soll, so erhält man in Browsern, die derartige ICC-Profile unterstützen und interpretieren, ein anderes Ergebnis, als in Browsern, die eingebettete Farbprofile ignorieren. Dieser Unterschied ist häufig verantwortlich für augenscheinlich unerklärliche, unterschiedliche Darstellungen. Browser, die Farbprofile unterstützen, sind Safari (für Windows und Mac OS X), OmniWeb 5.1.3 (für Mac OS X) und Firefox 3 (für Windows und Mac OS X).

Zusammenfassung

Aus den oben genannten Gegenheiten lassen sich acht grundsätzliche Best-Practice-Regeln für den Grafikeinsatz notieren:

  1. Wählen Sie das beste Format für Ihre Grafik mit Bedacht
  2. Verwenden Sie PNG- statt GIF-Grafiken
  3. Optimieren Sie Ihre Grafiken sorgfältig
  4. Entfernen Sie unnötige Daten (z.B. Metadaten) aus Ihren Grafiken
  5. Verwenden Sie 8bit- statt 24bit-PNGs, wann immer möglich
  6. Fassen Sie Einzelgrafiken zusammen (CSS-Sprites)
  7. Nutzen Sie Apha-Transparenz von 8bit-PNGs (Graceful Degradation für IE 6)
  8. Achten Sie auf eingebettete Farbprofile

Kommentare

ximarix
am 08.12.2008 - 07:30

Vielen Dank für den tollen und sehr ausführlichen Artikel! Besonders der Tipp mit dem 8bit-RGBA-PNGs hilft mir enorm weiter, da Internet Explorer da doch oft einen Strich durch die Rechnung gemacht hat.

Da werden sich auch einige Freunde freuen;)

Permanenter Link

Herbert Braun
am 08.12.2008 - 12:37

PNG ist sogar noch flexibler als beschrieben: Es unterstützt zwischen 1 und 16 Bit pro Channel und zwischen 1 (grau oder Farbpalette) und 4 Channels (RGBA). Für ein Pixel fallen also zwischen 1 und 64 Bit an.

Permanenter Link
Stefan Nitzsche

Stefan Nitzsche (Autor)
am 08.12.2008 - 12:46

@Herbert Wir haben uns auf die Verwendbarkeit im Web konzentriert. Du hast aber absolut Recht: rein technisch sind viermal 16 Bit, also 64 Bit pro Pixel möglich. Danke für Deinen Kommentar!

Permanenter Link

Ansgar
am 08.12.2008 - 16:55

Vielleicht sollte man darauf hinweisen, dass JP2-Dateien (JPEG2000) derzeit für das Web keine geeignetes Format darstellen, da zusätzliche Plugins, wie zum Beispiel QuickTime, benötigt werden, um die Bilder darzustellen. Das gleiche Ergebnis lässt sich in Photoshop beispielsweise mit Masken erzielen, die Bereiche vor zu hoher Kompression schützen und unscharfe Bereiche stärker komprimieren.

Permanenter Link

Matthias
am 08.12.2008 - 18:28

Danke für diesen tollen Artikel, da ich erst kürzlich mit einem Kollegen diskutiert habe, ob für die Hintergrundgrafik jetzt jpeg oder gif das bessere Format wäre.
Vielleicht wäre ja 8bit-png besser gewesen als die beiden anderen ;)

Aber danke nochmal für die schöne Zusammenfassung!

Permanenter Link

Visiongraphix W...
am 12.12.2008 - 10:52

Ich verwende Fireworks für alle Webdesigns und Umsetzungen exzessiv und kann einen Blick darauf für alle die Web gestalten nur empfehlen. Klar geht auch alles mit Photoshop, aber man merkt ganz klar, dass dieser zur Fotobearbeitung und Fireworks fürs Webdesign gemacht ist. Ganz zu schweigen vom preislichen Unterschied. Fireworks erstellt, wie im Artikel auch schon erwähnt, PNGs mit 8 Bit welche sowohl Alpha- als auch Indextransparenz enthalten. Seit Jahren freue ich mich über diesen Lebensretter und wunder mich warum das so wenig bekannt ist.

Permanenter Link

Ingo
am 17.12.2008 - 17:33

Tip zu den GIF Patenten (zum Glück kein Problem mehr):
http://de.wikipedia.org/wiki/GIF#GIF_und_die_LZW-Patente

Permanenter Link

Steffen
am 18.12.2008 - 11:00

Danke, für die informative Zusammenstellung - besonders zur Darstellung in älteren Browsern.

Permanenter Link

Hartmut
am 21.12.2008 - 21:38

Was mir eigentlich noch als "krönender Abschluß zu diesem gelungenem Artikel fehlt, ist der kleine Hinweis auf das Format SVG.
Mittlerweile sind fast alle Browser in der Lage, dieses Format anzuzeigen.
Ohne Eigenwerbung geht es nicht, den Link habe ich auf meinem Usernamen.
mfG + Frohe Weihnacht!
Hartmut

Permanenter Link

Die Kommentare sind geschlossen.