Tipp: Dateigröße von PNG-24-Bildern reduzieren

Möchte man, wie z. B. hier: „Chili con Carne“, ein freigestelltes Bild auf einen Fond setzen, muss man im Webdesign, wenn vorhandene Transparenzen erhalten bleiben sollen, zwingend das PNG-24-Format verwenden. Das hat zweierlei Nachteile: Ältere Browser wie der Internet Explorer 6 unterstützen dieses Dateiformat nicht oder nur mit Hacks – in der Regel vernachlässigbar. Der entscheidendere Nachteil aber ist die Dateigröße: PNG-24-Dateien sind, verglichen mit JPG-Dateien, riesig, was einerseits an der verlustfreien Kompression, andererseits am zusätzlichen Alpha-Kanal liegt.

Auf dem Desktop spielt die Dateigröße von Web-Bildern wegen der zunehmend schnellen DSL-Anbindungen nicht mehr eine so bestimmende Rolle wie vielleicht noch vor fünf Jahren. Ganz anders sieht es allerdings bei mobilen Endgeräten aus.

Glücklicherweise kann man mit sehr wenig Aufwand die Dateigröße von PNG-24-Dateien erheblich reduzieren. Diese Chilischote ist als 682×416 px PNG-24-Datei satte 152 KB groß:

Dateiformat: PNG-24, Dateigröße: 152 KB

Und so geht’s:

Man erstellt in Photoshop eine Einstellungsebene „Tontrennung“ und stellt die Anzahl der Stufen (in der Eigenschaftenpalette fälschlicherweise „Tonwertkorrektur“ genannt) so niedrig, dass Unterschiede zum Original gerade sichtbar werden:

Mit einer Tontrennung von 22 Stufen ist die gleiche PNG-24-Datei unter Beibehaltung aller Transparenzen nach dem Speichern nur noch 77 KB groß – eine Reduzierung um 50%!

Dateiformat: PNG-24, Tontrennung: 22 Stufen, Dateigröße: 77 KB