E-Mails auf Diät: So sollten Grafiken gespeichert und Newsletter verschlankt werden

Viele Newsletter bringen zu viel Gewicht auf die Waage. Überflüssige Polster beanspruchen auf mobilen Endgeräten nicht nur den Speicher über Gebühr. Eine Minute Download-Zeit für einen Newsletter stellt vor allem die Geduld der Abonnenten auf die Probe. Das darf nicht sein.

Nun bietet der HTML-Code meist wenig Einsparpotenzial. Allein der Zwang, CSS inline in allen Tags einzubinden, bläht den Quelltext schon gehörig auf. Sparen können Versender aber bei den Newsletter-Grafiken. Nicht nur Ihre Abonnenten werden es Ihnen danken, sondern auch manch Spamfilter. Die schauen nämlich gern auch auf das Text-zu-Bild-Verhältnis. Dabei gilt: Je kleiner, desto schlechter. Optimierte Grafiken verbessern die Ratio und erhöhen die Posteingangs-Zustellrate.

Aus dem Bauch heraus vermute ich, dass die Dateigrößen der meisten Newsletter-Grafiken, die in meinem Posteingang eintrudelt, um 25 % und teils viel mehr reduziert werden können – ohne nennenswerte Qualitätseinbußen. Zwei Stellschrauben dabei sind die Wahl der richtigen Abmessungen und des optimalen Grafik-Formats. Eine andere: Die richtigen Format-Einstellungen beim Abspeichern.
 

Frage des Formats: JPG, GIF oder PNG?

In welche Abmessungen ein Bild gespeichert werden sollte, lässt sich in einem Satz beantworten: Immer so, wie es im Newsletter verwendet wird. Belegt ein Foto im Newsletter eine Fläche von 200x200 Pixel, dann sollte es auch so auf dem Server abgelegt werden – und nicht etwa in 300x300 Pixel oder noch größer. Dies spart Platz und beugt nebenbei Darstellungsfehlern in einigen E-Mail-Programmen vor.

Bei der Frage, welches Grafik-Format für eine Newsletter-Grafik gewählt werden sollte, kommen hingegen drei Möglichkeiten infrage:
 

JPG-Format:

JPG reduziert das Dateigewicht zulasten der Bilddetails. Je weniger Kilobytes das Ergebnis wiegen soll, desto gröber sieht es aus. Die Qualität lässt sich beim Speichern oft auf einer Skala von 1 bis 100 regulieren. Stufe 1 liefert eine maximale Gewichtseinsparung, gleichzeitig gehen aber viele Details verloren. Vor allem harte Linienzüge und Kanten werden aufgeweicht und im Bild kommt es zu grobkörnigen Artefakten. In der Praxis empfiehlt sich meist eine Qualitätsstufe zwischen 65 und 70. Als Ausgangsbasis für die Optimierung sollte immer das Original-Bild gewählt werden, das noch alle Details und Farbinformationen enthält.

JPG bietet eine Farbtiefe von 24-Bit, also 2 hoch 24 (=16,78 Millionen) Farben. Das Format eignet sich daher besonders für Bilder mit großem Dynamikumfang wie z. B. Fotos, da hierbei die feinen Variationen in Helligkeit und Sättigung erhalten bleiben. Animationen und transparente Pixel, die den Bild-Hintergrund im Newsletter durchscheinen lassen, erlaubt JPG hingegen nicht.
 

GIF-Format:

GIF reduziert das Dateigewicht verlustfrei: Details wie harte Kanten bleiben im Gegensatz zu JPG erhalten und werden nicht aufgeweicht. Allerdings ist die Farbtiefe deutlich geringer als bei JPG. GIF bietet nämlich nur 8 Bit, womit sich 2 hoch 8 (= 256) Farben abbilden lassen. Trotz verlustfreier Kompression gehen also immer Farbinformationen verloren, falls das Ausgangsbild mehr als 256 Farben aufweist. Zur Auswahl der optimalen Farbpalette stehen diverse Algorithmen zur Verfügung, die individuell angepasst werden können. So lässt sich das Dateigewicht weiter reduzieren, indem die Anzahl der Farben schrittweise verringert und dabei die Auswirkung auf die Bildqualität beobachtet wird.

Generell empfiehlt sich GIF anstelle von JPG vor allem bei Motiven mit wenigen Farben, großen einfarbigen Flächen und zur Erhaltung harten Linien und Kanten. Zum Beispiel also bei Diagrammen, einfachen Logos, Texten und allgemein kleineren Abbildungen, die auf Vektorgrafiken basieren. Ungeeignet ist das Format vor allem für Fotos. Dies ist das Metier von JPG. JPG liefert hin und wieder aber auch bei vielen Farben, Farbverläufen, Schattierungen oder Spiegelungen bessere Ergebnisse als GIF. Hier gilt es, ein wenig zu experimentieren.

Zwei weitere Vorteile von GIF: Das Format bietet transparente Bildpunkte. Und es ist praktisch das einzige (verbreitete) Bildformat, das E-Mail-Versendern Animationen ermöglicht. Damit sind u.A. auch stumme Videomails möglich.
 

PNG-8:

PNG war ursprünglich als Ersatz für GIF angedacht und eignet sich daher für dieselben Bilder. Es reduziert das Dateigewicht meist noch effektiver und arbeitet ebenfalls verlustfrei. Bei sehr wenigen Farben und einfachen Mustern erweist sich allerdings GIF manchmal als stärker – ausprobieren! Animationen hat PNG originär leider nicht in petto. Nutzen Sie stattdessen GIF.

In der Variante PNG-8 verfügt das Format wie GIF über eine Farbtiefe von 8-Bit. Ein großer Unterschied zu GIF: Während bei GIF nur eine der 256 als transparent deklariert werden kann, erlaubt PNG darüber hinaus die Definition einer Transparenzstärke (alpha) für jede Farbe. Der Grad, zu dem bestimmte Hintergrundbereiche durchschimmern, kann also frei gewählt werden. Theoretisch zumindest.

Denn wer auf Nummer sicher in Sachen einheitlicher E-Mail-Darstellung gehen möchte, sollte sich auf den sogenannten Alphakanal nicht verlassen. Älteren Internet Explorer- (und damit Outlook-)Versionen bereit dies Probleme. Erst der IE7 berücksichtigt Alpha-Transparenz. PNG-Transparenz im GIF-Stil, also entweder voll deckend oder voll durchsichtig, bereitet dagegen keine Probleme. Wichtig: Wer wirklich ganz auf Nummer sicher gehen will, muss leider völlig auf PNGs verzichten, da erst Lotus Notes 8 das Format unterstützt. Vorgängerversionen zeigen lediglich ein rotes Kreuzchen (= Fehler).

(Am Rande: Das Format PNG-24 ist für Newsletter-Marketer meist weniger bedeutsam. Zwar bietet es das Beste aus den beiden Welten JPG und PNG: True Color und verlustfreie Kompression sowie transparente Pixel. Jedoch ist dadurch das Dateigewicht in der Regel größer als nötig, sodass JPG oder PNG-8 vorzuziehen sind.)
 

Tools of the Trade: z. B. Photoshop oder RIOT

Mit welchen Programmen sollten Bilder optimiert werden? Sehr gelungen ist etwa die Photoshop-Funktion „Für Web speichern“. Der linke Fensterausschnitt zeigt dabei jeweils das Originalbild mit allen Details, rechts daneben ist das Ergebnis der aktuellen Einstellungen zu sehen, die Einstellungen befinden sich am rechten Bildschirmrand:



Der Screenshot links zeigt: JPG versagt bei harten Kanten und unifarbenen Flächen. Das vergrößerte optivo Logo z. B. lässt sich mit dem GIF besser komprimieren. Dies macht der rechte Screenshot deutlich: 1053x401 Pixel  beanspruchen lediglich 8,5 KB Speicherplatz. Zudem bleiben die transparenten Pixel erhalten, die JPG in z.B. weiße Fläche verwandeln muss.



Umgekehrtes Bild bei Fotomotiven– hier versagt GIF (links). Weder reichen 256 Farben aus, um den Dynamikumfang zu erhalten, noch schafft die LZW-Kompression es, das die Dateigröße auf ein passables Maß zu reduzieren. Ganz anders das JPG-Format, das Details deutlich besser behält und zudem die Größe entscheidend auf immerhin 228 KB bei 1000x664 Pixeln reduziert.

Wer nun den „Hunni“ für Photoshop Elements sparen möchte, kann auch das ebenfalls sehr gelungene „Radical Image Optimization Tool“ (RIOT) von Lucian Sabo verwenden. Für den nicht-kommerziellen Gebrauch ist dies kostenlos. Andernfalls muss ein unbestimmter Betrag via PayPal gespendet werden. Bedienkomfort und Ergebnisse stehen Photoshop in nichts nach – meist erzielt RIOT sogar bessere Ergebnisse: