Optimierung der Bildtiefe

Etwas, das ich dieses Jahr gelernt habe (oder, ich schätze, wieder gelernt habe), ist, wie wichtig es ist, genau auf die Bittiefe von Bildern zu achten. Früher haben wir uns zwanghaft zwischen 2-, 4- oder 8-Bit-Farbtiefe bei unseren GIFs entschieden, denn als viele Nutzer mit Modemverbindungen das Web durchforsteten, zählte jedes Kilobyte.

Jetzt, wo eine riesige Anzahl von uns über Breitband auf das Web zugreift, wissen Sie was? Jedes Kilobyte zählt immer noch. Denn nicht jeder hat Zugang zu Breitband, besonders im mobilen Bereich; und auch jede Zeit, die wir beim Rendern von Seiten einsparen können, ist es wert, verfolgt zu werden. Ich ging davon aus, dass Optimierungstools sich um so triviale Dinge wie Farbtiefenoptimierung für uns kümmern, aber ich habe festgestellt, dass ich mich da geirrt habe.

Das gilt besonders für PNGs. Standardmäßig speichern viele Bildbearbeitungsprogramme PNGs mit einer Farbtiefe von 2^24, nur für den Fall.

Für ein Foto macht das einigermaßen Sinn (obwohl Sie es, wenn es ein Foto ist, wahrscheinlich als JPG oder WebP speichern sollten), aber für Dinge wie Logos und Icons sind das ungefähr 2^24 Farben mehr, als Sie verwenden werden.

Also, in Acorn, meinem bevorzugten Bildbearbeitungsprogramm,habe ich darauf geachtet, die Bittiefe von PNGs im Exportdialog stark zu reduzieren.In vielen Fällen konnte ich das Bildgewicht um 80 % oder mehr reduzieren, indem ich die Farben auf eine Palette von 256 oder weniger Werten indiziert habe, ohne visuelle Treue zu verlieren. (Auch hier spreche ich nicht von Fotografien.)

Hier ist ein Beispiel:

Dieses PNG mit voller Farbtiefe ist etwa 379 KB groß. Beschränkt auf eine Palette von 32 Farben ist es 61 KB groß. Und das ist nur zum Zeitpunkt des Exports: Sobald ich sie durch ImageOptim laufen lasse, sind die optimierten Größen 359 KB und 48 KB. Das ist eine Gewichtsreduzierung von etwa 85 %, nur durch die Verringerung der Farbtiefe. Und wenn ich das Bild einsetzen und feststellen würde, dass es ein paar mehr Farben benötigt, könnte ich den Prozess erneut durchlaufen, um 64 Farben zu verwenden: Die endgültige Größe beträgt in diesem Fall 73 KB, immer noch eine enorme Einsparung.

Die Reduzierung der Farbtiefe "per Auge" ist eindeutig mühsamer, als ein Optimierungsskript auf ein Verzeichnis mit Bildern anzuwenden, aber meiner Erfahrung nach sind die Ergebnisse in Bezug auf das Bildgewicht und damit auf die Benutzererfahrung weitaus effizienter. Und darum geht es ja eigentlich, oder?