Bildkomprimierung für Webseiten
1. Einleitung
Kaum eine Webseite kommt heutzutage ohne Bilder aus. Es bedarf jedoch einer gewissen Vorbereitung, Grafiken und Fotos für das Web aufzubereiten. Dieses kleine Tutorial soll ein kleiner Wegweiser zur Bildoptimierung sein.Die gelungene Komprimierung setzt natürlich die Qualität des Originalbildes voraus. Unscharfe, unter- oder überbelichtet Fotos sind bis zu einem gewissen Maße noch mit guter Bildbearbeitung zu retten, was aber entsprechende Erfahrung voraussetzt, ansonsten sollte auf deren Gebrauch verzichtet werden.
Der erste Schritt, bevor wir an die weitere Verarbeitung gehen, ist eine Kopie des Bildes zu erstellen. Nichts ist ärgerlicher als ein Bild zu vergeigen und kein Original mehr zur Verfügung zu haben.
Grundsätzlich sollte das zu komprimierende Bild in die Größe skaliert werden, in der es nachher auf der Webseite eingebunden wird.
Möchte man beispielsweise ein Bild mit 200 Pixel x 400 Pixel in die Seite einfügen so verbietet es sich ein 1024px x 860px mit den HTML Angaben width und height auf die gewünschte Größe zu skalieren. Die Qualität der Darstellung wird unterirdisch sein. Und ausserdem würden deshalb nicht weniger Bytes geladen.
Die meisten Bildbearbeitungsprogramme bieten die Möglichkeit die Bildgröße zu manipulieren. Dies geht entweder über Prozentangaben oder direkt mit der Eingabe der Höhe oder Breite in Pixel. Dabei sollte auf proportionale Skalierung geachtet werden. Meist findet sich in diesem Dialogfenster auch eine Angabe über die Auflösung des Bildes. Da eine Webseite ausschließlich auf dem Monitor dargestellt wird, reicht eine Auflösung von 72 dpi (dots per inch) für den PC aus. So, nun haben wir die Voraussetzung für die Komprimierung geschaffen.
Jetzt muss entschieden werden welches Dateiformat zur Anwendung kommt. Wir beschränken uns in diesem Tutorial auf die zwei gängigsten Formate GIF und JPEG. Grundsätzlich kann man als Faustregel zur Wahl der Formate sagen, das flächige Grafiken, Logos, Banner und Schrift, sowie S/W Bilder am besten als GIF wiedergegeben werden. Fotos, Grafiken mit Farbverläufen und kontrastreiche Bilder sollten als JPG komprimiert werden.
2. Das GIF-Format
Das GIF-Format stammt vom amerikanischen Online-Dienst CompuServe. Es enthält eine Farbpalette, die 256 Farben - 8 Bit pro Pixel - umfasst.Seit 1987 bietet das GIF-Format auch die Möglichkeit des Interlaced Modus. Die Grafik wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Die Grundstruktur der Grafik ist insofern sehr schnell am Bildschirm verfügbar. Beim weiteren Einlesevorgang wird die Grafik dann immer deutlicher und feiner aufgelöst.
Eine weitere Besonderheit des GIF-Formats ist das Darstellen einer transparenten Hintergrundfarbe. Die Grafik kann also nahtlos in den Hintergrund des HTML-Dokumentes eingefügt werden.
3. Das JPEG-Format
Der Name JPEG stammt von der Joint Photographic Experts Group, die den JPEG-Kompressionsalgorithmus entwickelt hat. JPEG ist ein Algorithmus zum Komprimieren verschiedenster Graphikformate. Dieses Format ist in der Lage ca. 16 Mio. Farben darzustellen. Der Algorithmus besteht zwar aus 5 Stufen, stark vereinfacht kann man sich das so vorstellen, dass in Pixelquadraten von minimal 4 Pixeln (bei stärkerer Komprimierung entsprechend mehr) ein Durchschnittsfarbwert gebildet wird.Die JPEG-Kompression ist ein verlustbehaftetes Verfahren. Ist ein Bild einmal komprimiert, lassen sich die Originaldaten nicht mehr herstellen. Jedes weitere Abspeichern der Datei führt zu einer wiederholten Komprimierung.
4. Beispiele
Jetzt sollte es schon leichter sein zu entscheiden welches Format grundsätzlich zu wählen ist. An zwei Beispielen wollen wir mal die verschiedenen Möglichkeiten durchgehen, um zu einem optimalen Ergebnis zu gelangen.Fangen wir mit folgendem Bild an und stellen uns vor das Original läge als Vektorgrafik - z.B. Corel Draw, Illustrator oder Freehand-Datei - vor.
Das Bild hier oben ist ein klassisches Beispiel für eine GIF-Komprimierung. Wir haben hier eine flächige Grafik mit Schrift. Also speichern wir das Bild als Kopie im GIF-Format ab, zunächst mit 256 Farben im Interlaced Modus. Da jedes Grafikprogramm ein bisschen anders ist, suche nach Möglichkeiten in diesem das Bild zu exportieren, Speichern unter, Umwandeln oder ähnlichem. Wir erhalten eine Datei, die ca. 8 Kb groß ist.
Jetzt werden wir noch ein wenig daran rumschrauben, um die Dateigröße zu verringern. Wir sehen, dass 256 Farben ein wenig überdimensioniert sind und gehen in diesem Bereich runter:
So, hier habe ich nun 4 Farben im Interlaced Modus gewählt. Die Datei ist nur noch 3 Kb groß. Wir sehen aber, dass ein Treppcheneffekt entsteht. Nicht sehr schön. Ok, also noch mal, diesmal mit 16 Farben, wobei immer mit 'Kopien' gearbeitet wird.
Das sieht schon ganz gut aus. Die Datei ist mit 4 Kb freundlich klein. Da sie auch sehr schnell geladen sein wird können wir auch auf den Interlaced Modus verzichten.
Was wäre denn, wenn wir das JPEG-Format für das Bild hier oben gewählt hätten? In ähnlicher Dateigröße käme folgendes heraus:
Gruselig, nicht wahr? Um nur annähernd an die Qualität des GIF's heranzukommen bläht sich die JPG-Datei auf 12 Kb auf:
Somit wäre eine JPG-Datei um das dreifache größer als die GIF-Datei. Ok, es ist hier nur ein Bild, aber was, wenn die Website viele Bilder enthält, z.B. für's Menü, Teaser usw.? Dann machen sich die Bytes durchaus bemerkbar und die Webseite lädt sich deutlich langsamer.
Nun ein Beispiel zum klassischen JPG-Format. Als Beispiel habe ich ein Motiv - vielen Dank an photocase.com - gewählt, das grundsätzlich als JPG komprimiert werden sollte. Das sind z.B. Darstellungen des Menschen, Bilder mit Verläufen oder Fotos. Hier beinhaltet das Foto durch die Hautfarbe eine größere Farbtiefe. Das folgende Bild habe ich schon mal 'vorkomprimiert', um uns selbst hier nicht mit megagroßen Bildern zu belasten. Dieses Foto ist mit einer 10%igen, oder Stufe 9-Kompression abgespeichert (je nach Grafikprogramm). Die Dateigröße beträgt 13 Kb. Ohne Komprimierung läge die Größe im JPG-Format bei ca. 50 Kb.
Wie Sie sehen, ist das Bild scharf. Wenn man die 50Kb ins Verhältnis zu den 13 Kb setzt, erkennt man man den Vorteil der JPG-Komprimierung. Selbst bei einer sehr geringen Kompression ist die Qualität vom Original kaum zu unterscheiden. Nun wollen wir aber sehen, ob wir die Größe noch weiter nach unten drücken können...
Oups, das war wohl ein wenig zuviel des Guten. Bei Stufe 3, also hoher Kompression über 80%, beträgt die Dateigröße zwar nur 3 Kb aber es treten unschöne, so genannte Artefakte auf. Daran kann man sehr schön sehen, wie sich die Komprimierung auswirkt. Wie schon oben erwähnt wird eine Anzahl von Pixel im Quadrat auf eine Durchschnittsfarbe zusammengefasst. Sind die Quadrate zu groß sieht das Bild sehr verpixelt aus. Also wählen wir mal einen schönen Mittelwert von Stufe 6 - 7, oder 60 - 70%.
Dies ist ein sehr zufrieden stellendes Ergebnis. Das Bild ist vom Original nicht zu unterscheiden und hat eine Größe von 5 Kb. Damit kann man prima leben. Im Gegenzug machen wir mal den Versuch diese Bild als GIF zu komprimieren. Mit gleicher Dateigröße sähe das so aus:
Dieses Bild ist zwar nur 7 Kb groß, dafür musste es aber auf 8 Farben reduziert werden. Mit 256 Farben kommen wir auf sage und schreibe 30 Kb. Also keine wirkliche Alternative!
5. Transparentfarbe setzen
Bilder sind ja nicht immer rechteckig. Deshalb entsteht häufig die Anforderung eine Transparenzfarbe zu setzen, so dass nur noch Konturen oder Teilinhalte des Bildes zu sehen sind. Grundsätzlich kann eine Transparenzfarbe nur bei bestimmten Bildformaten gesetzt werden. Das geht bei den hier vorgestellten Typen nur bei GIF-Bildern. Betrachten wir mal unser GIF von vorhin. In der Regel kann man im Grafikprogramm eine Farbe als 'Transparent' bestimmen, hier bei unserem GIF habe ich zunächst mal 'weiss' als transparente Farbe gesetzt.Solange der Hintergrund der Webseite weiß ist, ist alles in Ordnung. Aber angenommen ich möchte gerne einen blauen Hintergrund haben. Das Ergebnis könnte dann so aussehen:
Nicht wirklich optimal. Am Besten ist es also die Hintergrundfarbe des Bildes der Farbe der Webseite anzupassen.
6. Schlussworte
Es empfiehlt sich bei der Bildkomprimierung ein wenig mit den Einstellungen zu experimentieren, bis das Ergebnis zufrieden stellend ist.Gut komprimierte Bilder sind ein Aushängeschild für Sorgfalt und Professionalität, und erfreuen die Besucher/innen Eurer Website.