Mit Animate CC von Adobe lassen sich ja bekanntlich auch Werber-Banner machen, welche schön animiert auf verschiedenen Seiten glänzen sollen. Wo früher Flash noch eine SWF-Datei exportiert hat, kann nun der Animator neu puren Web-Code aus reinem HMTL, CSS und Javascript generieren. Dieser hat den Vorteil, dass er auf allen Geräten angezeigt werden kann und nur wenige KB schwer ist. Nun, zumindest wäre dies das Ziel. Denn viel Betreiber von Webseiten, welche Banner einbinden, limitieren die Maximalgrösse des Banners auf z.B. 150 KB, also fast nichts.
Dateigrösse von Web-Banner kleiner machen
Doch meistens erhält man beim ersten Export eine Gesamtgrösse von 1 MB. Dies ist vor allem dann der Fall, wenn mehrere grossflächige Bilder verwendet werden, oder einige grössere PNG eingebunden wurden. Was also tun?
Wichtig ist, dass die verwendeten Bilder der genauen Grösse entsprechen, welche sie im Banner auch einnehmen. Der Rest muss in den Export-Einstellungen und weiterer Komprimierung optimiert werden.
Exporteinstellungen von Animate CC optimieren
Wenn der erstellte Banner als Web-Banner exportiert werden soll, kann dies unter Datei/Veröffentlichungseinstellungen getan werden. Hier bieten sich einem verschiedene Möglichkeiten zur Optimierung. Die wichtigste Schraube findet sich unter dem Reiter «Spritesheet»:
Hier ist es wichtig, dass die erste Option «Bildelemente in Spritesheets kombinieren» angewählt wird. Dadurch werden alle verwendeten JPEG und PNG in jeweils eine Datei gespeichert. Die grösste Auswirkung hat aber die Qualitäts-Einstellung bei PNG und JPEG. Hier kann, je nach verwendeten Bilder, sehr viel heraus geholt werden. Schraubt man die Qualität bei den JPEG-Einstellungen zu weit nach unten, dann schauen die Bilder nicht mehr so toll aus und werden verpixelt. Je nach Bilder, kann man hier aber schon auf 20 gehen.
Bilder und Javascript von Animate CC komprimieren
Eine weitere Möglichkeit der Dateigrössen-Reduktion, liegt in der Komprimierung. Nachdem der Banner von Animate «Veröffentlicht» wurde, können im Export-Ordner die Javascript-Datei sowie die Bilder gefunden werden.
Bilder
Die Bilder lassen sich auf folgender Seite nochmals, teils erheblich komprimieren:
Es lohnt sich auch, den Export zuerst auf einer besseren Qualitäts-Stufe durchzuführen und dann die Kompression zu machen, da diese keinen Qualitätsverlust zu Folge hat. Um’s Ausprobieren und mehrfache Exportieren kommt man hier nicht herum.
Javascript
Die Javascript-Datei kann, je nach Einstellungen und Animationen, um die 30 KB oder mehr sein. Da lohnt sich eine mögliche Komprimierung. Dafür muss die Datei mit einem Editor geöffnet und der komplette Inhalt heraus kopiert werden. Dieser kann nun auf folgender Webseite komprimiert werden. Einfach in das Text-Feld hinein kopieren und auf «Compress» klicken.
www.giftofspeed.com/javascript-compressor/
Danach den Code wiederum kopieren und zurück im Editor den Alten damit überschreiben. Nun noch die Datei abspeichern und fertig. Die Dateigrösse sollte sich nun um einige KB reduziert haben.
Falls Ihr noch weitere Tricks für den Export von Web-Banner aus Adobe Animate CC kennt, lasst es uns in den Kommentaren wissen.
Über mich
2 Antworten
Die JS-Datei ist gerne sehr groß, wenn man viel statischen Text verwendet. Ich vermute, dass Animate jeden einzelnen Buchstaben als Vektor in die JS-Datei niederschreibt.
Verwendet man jedoch dynamischen Text mit Webfonts, wird nur noch der reine Text in die JS-Datei geschriebe, was enorm viel Platz spart.
Kann man das aus bestimmten Gründen nicht tun, kann man immer noch die JS-Datei komprimieren. Dabei hilft jscompress.com. Dort werden sämtliche Leerzeichen etc. aus der JS entfernt, das spart meist so um die 5-10% der Datenmenge.
Hallo, vielen Dank für deinen Beitrag. Ich habe ein Problem, vielleicht kannst du mir weiterhelfen. Images und Javaskript sind richtig schön klein (13 und 28 kb) jedoch ist die createjs-Datei mit 187kb viel zu groß, wie bekomme ich die denn kleiner?