Banner Gewicht verringern mit online Komprimierung von TinyPNG

Bei meinem letzten Artikel habe ich drüber geschrieben wie man einiges an „Gewicht“ (in Kilobytes) sparen kann in dem man „hosted libraries“ einsetzt. Es gibt noch andere Möglichkeiten, etliche Kilobytes einzusparen, und das ist auch dringend nötig! Denn ich höre immer wieder einen Satz gehört wie „kriegen wir das hin mit nur 150 KBs?“ – denn dies ist die magische Grenze für Standard-Banner bei den meisten Adservern wie z.B. Doubleclick, Sizmek oder Adform. Alles was drüber geht kostet dann nämlich mehr, was aber normalerweiser gar nicht im Budget der Mediaagenturen eingeplant ist. Das Zauberwort heißt „Komprimierung“!

Meistens ist es auch ohne eine Komprimierung unproblematisch, aber in den Moment wo man mit vielen transparenten Bilder arbeitet (Beispiel: Autos die ins Bild reinfahren, wie hier in meinem anderen Artikel oder wenn man Puffer für anderen Sachen braucht, wie eigene Schriftarten einbetten), dann kann es zu einen sehr knappen und spannenden Angelegenheit werden die Kilobyte-Grenze zu treffen!

Bei Photoshop gibt es die Möglichkeit PNGs und JPGs mit „Save for Web“ zu speichern, damit kann man die Komprimmierungsstufe von JPGs schon einstellen. Das ist bei PNGs aber nicht der Fall und somit werden die PNGs aus Photoshop aus „losless“ also ohne Verluste gespeichert, was in der Regel ein hohes Dateigewicht bedeutet.

Bei dem süßen Panda von TinyPNG https://tinypng.com gibt es die Möglichkeit einfach per „drag’n’drop“ die unkomprimierten JPGs und PNGs hochzuladen – die werden dann auf deren Server optimiert und können direkt einzeln oder als ZIP-Paket heruntergeladen werden oder sogar direkt auf Dropbox gespeichert werden. Zu beachten ist die Grenze von 20 Bilder pro Vorgang. Man kann aber selbstverständlich mehrere Vorgänge hintereinander starten wenn man mehrere Bilder hat (wenn man eine ganze Reihe von Bannern komprimieren muss).

Komprimierungsergebnis:

Ergebnis der Optimierung

Übersicht des eingesparten Gewichtes bei der Komprimierung + Dropbox/Download Buttons – ©TinyPNG

Auch sehr hilfreich für höheren Datenmengen ist das Photoshop-Plugin: https://tinypng.com/photoshop, der für 50 US-Dollar zu erwerben ist. Meiner Meinung nach eine sehr gute Investition für Menschen wie mich, die ständig Bilder komprimieren müssen um das Gewicht der Banner zu reduzieren.

PNG Vergleich:

unkomprimiertes Bildkomprimiertes Bild

Links unkomprimiertes Bild mit 82 KBs, rechts komprimiertes bind mit 33 KBs. Meiner Meinung nach ist kaum einen Unterschied zu sehen – ©Pixabay

Mit den Plugin kann man also direkt aus Photoshop die hervorragende Komprimierung anwenden – aber noch besser ist die Möglichkeit die „Batch Bearbeitung“ zu nutzen, wenn man mehrere Dateien zu verändern hat. Dazu wählt man einen Lokalen Ordner auf dem Computer aus und wendet die Optimierung in allen sich darin befindend PNGs und JPGs an, übrigens auch in allen Unterordnern! Man kann also das gesamte Projekt samt Format-Adaptionen „wie gewöhnlich“ produzieren und am Ende die Komprimierung über den gesamten Ordner laufen lassen. Ich empfehle trotzdem eine Sicherheitskopie der unkomprimierten Bilder zu haben, das schadet ja nie!

Man sieht also das man dem Wunsch der Agenturen nach kleiner Datenmenge auch entgegen kommen kann, indem man die Bilder mit einem Tool wie TinyPNG verkleinert.

Ich hoffe mit diesen Artikel geholfen zu haben! 🙂