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

Nutzen von Hosted Libraries in HTML5-Bannern bei der Auslieferung über Adserver

Heute geht es um den Nutzen von „hosted libraries“, also die extern gehostete Ressourcen (wie das auf den letzten Artikel verwendete TweenMax) in Bannern. In der Regel sind wir bei de Produktion von Standard-Banner ziemlich eingeschränkt was das „Gewicht“ des Banners angeht (also die Datenmenge, typischerweise gemessen in KBs). Jeder Werbebanner wird viele tausende Male gezeigt, und all die Daten müssen natürlich jedes Mal übertragen werden. Kein Wunder das wir echt froh sind über jedes bisschen KB was wir bei der Produktion einsparen können!

Was ist also zu tun, damit wir einige KBs einsparen können und wir die Java-Skript Bibliotheken oder Frameworks wie TweenMax nicht „physisch“ mit den Banner ausliefern müssen bzw. nicht mit auf dem Adserver/Vermarkter hochladen müssen? Zum Glück werden diese Skripte von verschiedenen CDN’s (content delivery networks) vorgehalten, wo wir sie dann nachladen können:

HTML im Head-Bereich:

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

In der Regel findet man alle möglichen aktuellen Skripte, wie jQuery, CreateJS, AdobeEdge etc auf den CDN. Das hat auch den Vorteil das ein Browser, der bereites das jeweilige Skript von der CDN geladen hat, dieses im Cache behält und dann nicht bei jedem Aufruf neu laden muß.

Hier einige für die HTML5-Banner-Entwicklung immer wieder relevanten Skripte:

Wichtig dabei ist gleich immer auf eine Secure-Verbindung zu achten, also der Skript sollte aus einer https:// Quelle geladen werden, sonst könnte es Beschwerden von den Vermarktern geben – diese wollen ja keinen unsicheren Content auf ihren Seiten haben.

Ich hoffe mit diesen Beitrag ein wenig geholfen zu haben! 🙂

Drehende Autoreifen HTML5 Banner Animation mit TweenMax

Die Automobil-Branche ist sicherlich eine der Branchen die am meisten in Online-Banner investieren, täglich sehe ich unzählige Banner unterschiedlicher Automarken. Jedes neue Auto-Modell eines Herstellers findet sich selbstverständlich auch im Web wieder. Es ist in der Fülle von Bannern also nicht gerade einfach ein einzigartiges und vor allem Aufmerksamkeit-Starkes Banner zu präsentieren. Dazu kommt jedes Hilfsmittel zur Güte! Hier werde ich zeigen wie man mit HTML5, Javascript, CSS und TweenMax eine schöne Animation zaubern kann die ausgezeichnet zu Fahrzeugen passt.

Ein meiner Meinung nach sehr guter visueller Trick ist das beworben Auto in das Bild reinfahren zu lassen – eine Anforderung die auch oft ohne meine Empfehlung von alleine durch meine Auftraggeber gestellt wurde. Schließlich ist fahren ja genau das was Autos tun sollen und stellt so direkt eine Verbindung zum Nutzen und zur Inspiration für den Kunden dar. Dabei reicht aber nicht „nur“ das reinfahren, sondern es sollte auch halbwegs realistisch aussehen. Dabei spielt das Drehen der Autoreifen bzw der Felgen eine wichtige Rolle (sonst würde das Auto praktisch stehend über den Boden „schweben“).

Im folgenden möchte ich beschreiben wie folgende Animation entstanden ist:

Für die Animation erstellen wir zwei <div> Elemente, ein Element das die Felge beinhaltet und dazu ein übergeordnetes Element. Es ist wichtig hier zwei <div>’s zu haben, denn wir wollen die Reifen/Felge rotieren, müssen aber den Winkel dessen noch anpassen so dass es genau richtig sitzt. Hilfreich ist auch beide Reifen in einen Container zusammen mit den Autobild zu stecken, damit man alles zusammen ins Bild reinfahren lassen kann.

Wichtig dabei ist ein sauber freigestelltes Bild des Autos zu haben und ein gutes frontales Bild von dem Reifen bzw der Felge (beim Kunden nachfragen, werden sie sicherlich parat haben) 🙂

Autofelge von vorneFreigestelltes Autobild

Freigestelle Bilder von Felge und Auto – ©Pixabay

Und hier nun zum wesentlichen Teil des Ganzen; als erstes binden wir die Bilder ins HTML ein:

HTML

<div id="autoContainer">
     <div id="reifen1"> <img src="assets/felge.png" id="felge1"> </div>
     <div id="reifen2"> <img src="assets/felge.png" id="felge2"> </div> 
     <img src="assets/auto.png" id="auto">
</div>

Dann fügen wir die Reifen und Felgen ins CSS ein:

CSS

#reifen1 {
    position: absolute;
    left: 415px;
    top: 158px;
    z-index: 11;
    transform: rotateY(-33deg) skewX(-7deg);
    -webkit-transform: rotateY(-33deg) skewX(-7deg);
    -moz-transform: rotateY(-33deg) skewX(-7deg);
}

#felge1 {
    height: 45px;
    width: auto;
}

Wie man oben sehen kann, haben wir bei #reifen1 eine Verzerrung/Neigung des Elementes spezifiziert, damit es zu dem Winkel des Autos im Bild passt. Ohne diese Verzerrung würde das Ganze wie in der Abbildung unten aussehen und dabei noch „eiern“ beim rotieren:

Richtige Winkel für die Felgen Falsche winkel für die Felgen

Links richtiger Winkel, rechts falscher Winkel

Jetzt müssen wir nur die #felge1 Elemente drehen lassen. Hierfür nutze ich gerne TweenMax mit einem Code-Schnipsel dass die #felge1 endlos drehen lässt. Das zweite Schnipsel dafür sorgt dass die timeScale des tweens auf 0 gesetzt wird, so dass sich die Reifen langsam zum Ende hin abbremsen.

Javascript

function startReifen() {
    reifenTween= new TweenMax(&amp;amp;quot;#felge1, #felge2&amp;amp;quot;, 0.25, {
        rotation: &#039;-=360_cw&#039;,
        ease: Linear.easeNone,
        repeat: -1
    });

    TweenMax.to(reifenTween, 1.0, {
        timeScale: 0,
        delay: 1.1,
        ease: Back.easeOut.config(0.6)
    });
    return reifenTween;
}

Man kann mit allen Parameter rumspielen bis man das beste Ergebnis für das individuelle Bedürfnis gefunden hat. Zum Beispiel kann man die Räder in die andere Richtung drehen lassen mit rotation ‚+=360_cw‘ oder die Länge der Animation oder des Delays ändern. Im Großen und Ganzen ist dies ein guter Ansatz für eine realistische und lebhafte Animation.

Ich hoffe mit diesen Beitrag hat es euch gefallen! 🙂