Workshop: Bildkompression fürs Web

Haben Sie bisher mit Bildbearbeitung nur im Rahmen des klassischen DTP zu tun gehabt? Dann werden Sie zunächst ein bisschen irritiert sein, wenn Sie Bilder für den Einsatz im Internet aufbereiten wollen. Bei dieser Arbeit haben die Formate Tiff, EPS oder PSD, mit denen Sie sonst täglich zu tun haben, keinerlei Stellenwert. Für die Ausgabe auf dem Tintenstrahldrucker oder im Offsetdruck zählt vornehmlich ein breites Farbspektrum und Detailgenauigkeit. Beides wird durch viele Bildpunkte mit hoher Farbtiefe und damit verbunden einem großen Datenumfang erreicht. Beim Einsatz im Netz ist das anders. Soll ein Foto nur am Bildschirm dargestellt werden, kann man seine Ausmaße getrost auf die Monitorauflösung begrenzen, also die Anzahl der Pixel verringern. Muss es vor der Darstellung noch per Telefonleitung übertragen werden, beschleunigen Sie den Vorgang erheblich, wenn Sie es im komprimierter Form verschicken. Ein Rechenbeispiel verdeutlicht das: Ein RGB-Bild, das auf einer DIN A4 Seite mit 300 dpi Auflösung ausgedruckt werden soll, hat eine Dateigröße von ca. 25 Megabyte. Um es per ISDN-Verbindung aus dem Netz auf den heimischen Rechner herunter zu laden, braucht man bei optimalen Bedingungen rein rechnerisch etwa eine gute Stunde. In der Realität aber meist das doppelte bis dreifache der Zeit. Reduziert man es auf die Bildschirmmaße von 800 mal 600 Pixeln bleiben immer noch etwa eineinhalb Megabyte und damit eine rechnerische Downloadzeit von rund drei Minuten. Das ist zwar schon ein großer Fortschritt, aber immer noch viel zu lange, wenn man mit dem Bild zum Beispiel den Hintergrund einer Internetseite verzieren will. Mit einer Kompressionsmethode wie Gif oder Jpeg (sprich: Dscheipeg) läßt sich der Dateiumfang motivabhängig auf bis zu 10 Kilobyte verringern. Dann dauert das Herunterladen nur noch ein paar Sekunden. Und plötzlich wird das Surfen auf der Internetseite ganz komfortabel. Nun fragen Sie sich sicherlich, warum man nicht alle seine Bilder in dieser Platz sparenden Form lagert. Nun, um ein altes Sprichwort zu zitieren: Wo gehobelt wird, da fallen Späne. Eine derartig hohe Kompressionsrate geht nicht spurlos am Bild vorbei. Ihr fallen Details und Farbnuancen zum Opfer. Bei der ausschließlichen Nutzung am Bildschirm ist das nicht weiter schlimm, doch wenn sie das Bild ausdrucken wollen, erinnert das Resultat nur noch schemenhaft daran, was ursprünglich zu sehen war. Zudem unterscheiden sich die Ergebnisse der Kompressionsmethoden ganz erheblich – je nachdem, was für ein Motiv man schrumpfen will. Damit Sie für jedes Bild die passende Methode finden, bietet Photoshop ab der Version 5.5 ein sehr komfortables Werkzeug, mit dem Sie Ihre Fotos an die Verhältnisse im Internet anpassen können.

Hinweis: Dieser Workshop funktioniert mit Photoshop ab Version 5.5. Für größere Bildansichten bitte auf die Bilder klicken. Registrierte Mitglieder können das Arbeitsmaterial über den Link unterhalb des Workshops herunterladen.

Bilder verkleinern

Bevor es ans Komprimieren geht, läßt sich schon einiges im Vorfeld zur Verkleinerung der Datei tun. Zunächst verändern Sie den Farbraum unserer  bereits farbseparierten Ausgangsdatei im Menü „Bild“ unter „Modus“  in „RGB“. Damit fällt schon einmal ein Viertel der Datenmenge weg. Als nächstes begrenzen Sie die Bildgröße auf browserübliche Dimensionen. Halten Sie sich dabei vor Augen, dass der Betrachten beim Ansehen des Bildes nicht unbedingt hin- und herscrollen möchte. Typische Bürocomputer haben heute eine Bildschrimauflösung von 600 mal 800 Pixeln, nur die Geräte von Grafikern lösen höher auf. Damit jeder, der ein Internetangebot potentiell aufruft auch eine ähnliche Darstellung erhält, orientiert man sich immer am kleinsten gemeinsamen Nenner. Und der ist in diesem Fall die sogenannte „SVGA“-Auflösung.

Rechnen Sie das Bild im Dialog „Bildgröße“ aus dem Menü „Bild“ in der Breite auf 800 Pixel herunter Durch diese Änderung sinkt die Bildgröße von über 25 auf gut 1,3 Megabyte. Wenn Sie es nicht als flächendeckendes Hintergrundbild einsetzen wollen, reduzieren Sie die Breite noch weiter.

Farbnuancen zusammenfassen mit Jpeg

Das Reduktionsprinzip der Jpeg-Kompression besteht darin, ähnliche Farbnuancen zu gleichfarbigen Flächen zusammenzufassen. Je höher Sie die Kompressionsintensität wählen, desto deutlicher erkenn Sie den Eingriff. Die Informationsmenge wird vermindert und es entstehen Verluste in den Bilddetails. Damit das Bild bei diesem Vorgang nicht zu sehr an Schärfe verliert, werden die vorhandenen Kontrastkanten erheblich betont. Photoshop 5.5 erlaubt eine sehr komfortable Jpeg Optimierung, die auf das gleiche Tool zurückgreift wie das Schwesterprodukt Image Ready. Nur dass es im Photoshop bei großen Ausgangsbildern ungleich schneller arbeitet. Mit den Einstellungsmöglichkeiten des Formats kann man ein Bild entweder auf ein Drittel seiner Größe verkleinern, ohne dass das Auge beim ersten Anblick den Qualitätsverlust wahrnimmt, oder das Foto im Extremfall bis auf ein paar wenige Prozent seine Ursprungsgröße reduzieren – allerdings lässt sich von dem Bild danach auch kaum noch etwas erkennen.

Rufen Sie im Menü „Datei“ den Dialog „Für Web optimieren“ auf und legen hier rechts oben  zunächst als Optimierungsformat „JPEG“ fest.

Bei unserer Voreinstellung sehen wir kaum Qualitätsverlust, das Bild ist allerdings noch 344 Kilobyte groß, was bei der Übertragungsrate eines langsamen 28.800er Modems 124 Sekunden Transferzeit ausmacht, wie Sie den Angaben links unten entnehmen können.

Zum anderen Extrem gelangen Sie, wenn Sie die Qualitätseinstellung auf Null setzen. Die Datei ist dabei gerademal noch knapp 13 Kilobyte groß. Allerdings sieht man die kompressionsbedingten Artefakte nur zu deutlich.

Bei einer Qualitätseinstellung von 35 kommt man langsam zu einem erträglichen Kompromiss. 21 Kilobyte Größe und die wesentliche Information bleibt erhalten.

Wer noch ein wenig Finetunen will, kann auf die integrierte Weichzeichnungsfunktion zurückgreifen. Diese hat einen doppelten Effekt: Zum einen weicht sie die harten Kanten der Artefakte wieder ein, zum anderen spart sie noch einmal Speicherplatz, da sich unscharfe Bildelemente besser komprimieren lassen.

Wer die genauen Unterschiede zwischen Ausgangsbild und Endprodukt im Vergleich begutachten möchte, kann über den Darstellungsreiter „2fach“ die beiden Versionen nebeneinander betrachten.

Farbtabellen erzeugen mit GIF

Das Gif-Format beschränkt Bilder auf 256 Farbenstufen. Dabei kann man sich an drei Fingern abzählen, dass es wahrscheinlich nicht übermäßig geeignet ist, um Fotos brillant wiederzugeben. Andererseits soll die Wiedergabe von Bildern im Internet nicht in erster Linie brillant sein sondern schnell. Während der Kompressionsalgorithmus des Jpeg-Formats blockweise und verlustbehaftet arbeitet, geht Gif zeilenweise und verlustfrei vor. Das Kompressionsprinzip gleicht technisch dem der LZW-Komprimierung , die Ihnen vom Tiff-Format bekannt ist. Jede Zeile wird nach mehrfach vorkommenden beieinanderliegenden Farben durchsucht und anstatt zwanzig mal einen gleichartigen Pixel in voller Farbtiefe zu speichern, fasst der Algorithmus diese Information verknappt zusammen. Besonders einsparend wirkt sich der zugrundeliegende Bildmodus bei Gif-Format aus. Vor der Kompression müssen Gif Bilder auf der Basis von Farbpaletten indiziert werden, wobei der wahrnehmbare Qualitätsverlust entsteht. Ohne hier weiter auf die technischen Grundlagen der Inidizierung einzugehen, kann man grundsätzlich sagen, dass sich nur bestimmte Motive oder Bildarten für diese Reduktionsmethode eignen. Das sind natürlich solche, die auf wenigen Farben aufbauen. Ideale Kandidaten sind Screenshots oder einfache Grafiken. Hier wiederholen sich die Farben häufig und können so gut zusammengefasst werden. Auch monochrom wirkende Farbfotos bringen ebenso wie Graustufenbilder gute Ergebnisse. Weniger bis gar nicht geeignet sind Bilder, die von exakten Verläufen oder vielen differenzierten Farbschattierungen leben.

Wichtig ist zunächst die Wahl der richtigen Farbpalette. Den kleinsten gemeinsamen Nenner bei der geringsten Speichernutzung bildet die Einstellung „Web“.  Hier wird das Bild auf die Standardfarbpalette der gängigen Browser reduziert.

Bessere Ergebnisse – gerade für Fotos - bei spürbar höherem Speicherbedarf bringen Paletten, die aus den im Bild vorhandenen Farben mit den Methoden Adaptiv, Perzeptiv, Selektiv oder Eigene berechnet werden.

Ziel einer gelungenen Kompression ist ein möglichst gutes Bild bei möglichst wenig Speicherbedarf. Der nächste Schritt auf dem Weg dorthin ist das sogenannte Dithering. Hierbei handelt es sich um eine Farbmischtechnik, die durch die Ansammlung von Punkten aus Grundfarben, den optischen Eindruck von Zwischentönen entstehen lässt. Dieses Verfahren kostet zwar auch mehr Speicher, aber meist nicht soviel viel wie eine angepasste Farbpalette.

Im Diffusionsmodus des Dithering hat man noch reichlich Möglichkeiten in das Bild einzugreifen. Mit der Lossy-Einstellung fügt man dem LZW-basierten Kompressionsalgorithmus eine Verlustkomponente hinzu. Das Ergebnis wird dann rauher und körniger, dabei verringert sich die Bildgröße jedoch erheblich.