esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

esse est percipi

Einfach gute Mac-Apps.

Von einem unabhängigen Entwickler,
der sie täglich selbst nutzt.

Blog Apps

Impressum/Datenschutz/AGB

Webdesign | Mittwoch, 15. Mai 2013

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ß:

Screenshot
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:

Screenshot

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%!

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

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Markus Denhoff Mittwoch, 15. Mai 2013, 13:02 Uhr

…und, wenn es dann sogar nur eine Grafik ist, die mit 8-bit Farbtiefe auskommt, kann man mit pngquant ein 8-bit PNG mit Alphakanal machen. Bei der Chilli ist das Ergebnis optisch nicht ganz optimal aber nur noch 40 KB groß.

Stefko Mittwoch, 15. Mai 2013, 13:59 Uhr

Ein Fond wird angesetzt, ein PNG allerdings auf einen Font gesetzt – allerdings geht's beim Artikeleinstieg ja auch aus auch kulinarisch zu … ;-)
Damit ich hier aber nicht nur klugscheiße, weiße ich mal noch auf tinyPNG hin, was ganz ausgezeichnete Ergebnisse liefert.

Michael Preidel Mittwoch, 15. Mai 2013, 14:05 Uhr

@Stefko: Siehe hier: „Mein Name ist Font“ ;-)

Stefko Mittwoch, 15. Mai 2013, 14:25 Uhr

ahhhhhhhhh verstehe, ein Insiderwitz ;-)
Ich lese hier zwar schon lange mit, aber genau der Artikel ist mir wohl durchgerutscht.
In diesem Sinne, Mahlzeit! :-)

Mathias Mittwoch, 15. Mai 2013, 16:48 Uhr

Auch das geniale und kostenlose ImageOptim kann aus der Chili ohne Verlust nochmals 13% rauspressen:
Aus dem dem gleichen Hause, aber in die Richtung tinyPNG – allerdings als Desktop-App – gibt's dann noch ImageAlpha. Beide unersetzlich, denn der PSD-Webexport von PNG's ist in Sachen Dateigrösse lausig.

Ralph Dienstag, 21. Mai 2013, 20:16 Uhr

@Stefko: Auch klugscheißen will gelernt sein! Ein „Font“ bezeichnet immer noch eine Schriftart. Wohingegen „Fond“ sehr wohl neben dem Bratensaft und den Rücksitzen auch für den Hintergrund eines Bildes oder einer Grafik steht.
Nix für ungut, ich leg’ mich wieder hin …
Grüße Ralph

anne Mittwoch, 29. Mai 2013, 08:26 Uhr

danke für den tipp! war kurz zuvor über diesen vergleich gestolpert, wenn auch schon älteren datums..

Da Stefan Montag, 24. Juni 2013, 07:19 Uhr

Cool, danke für den Tipp! Den kannte ich noch nicht…