5 Profi-Tipps für kleine Dateigrößen von Flash-Bannern

0
2268
5 Profi-Tipps für kleine Dateigrößen von Flash-Bannern

5 Profi-Tipps für kleine Dateigrößen von Flash-BannernOft werden Storyboards und Ideen für Flash-Werbemittel, bzw. Flash-Banner, von Designern und Konzeptionern ohne Rücksicht auf technische Möglichkeiten kreiert.

Entweder möchte man den Ideen freien Lauf lassen, oder es fehlt das nötige Fachwissen. Beides ist legitim, denn schließlich ist es hauptsächlich Aufgabe des Flash-Entwicklers,  sich um die technischen Spezifikationen zu kümmern.

Im Artikel führe ich 5 wertvolle Tipps zur Optimierung der Dateigröße auf.

Wie bekomme ich das alles nur auf 40 Kilobyte?

Nehmen wir an es geht um einen „Full-Size-Banner“ mit 468×60 Pixeln, einem der beliebtesten Formate. Als maximale Dateigröße wird hierzulande erfahrungsgemäß 40 Kilobyte festgelegt. Es gibt natürlich Ausnahmen bei Video- bzw. Streaming-ADs, und auch bei einigen Anbietern die Möglichkeit, weitere Kilobytes zu kaufen. In diesem Fall möchte ich den den „Normalfall“ beleuchten. Und der bedeutet, optimieren bis zum letzten Pixel. Los geht’s!

1.) Überflüssige Pixel vermeiden

Die Teile einer Bitmap-Grafik, die außerhalb der Arbeitsfläche/Bühne des Banners liegen und auch im Verlauf der Animation nicht auf dieser erscheinen, sollten nach Möglichkeit eingespart werden. Möchte ich beispielsweise mein Bild von links nach rechts hineinfahren lassen, wie im Beispiel dargestellt, ist alles was oberhalb und unterhalb, oder auch in diesem Fall an der linken Seite der Arbeitsfläche liegt, überflüssig.

Unnötige Pixel einsparen
Nicht optimal, die überflüssigen Pixel werden nie zu sehen sein
Optimal! Nur die Pixel die wirklich zu sehen sind, werden verwendet.
Optimal! Nur die Pixel die wirklich zu sehen sind, werden verwendet.

Eine weitere Möglichkeit Pixel einzusparen kann es sein, Teile einer Grafik durch Vektoren zu ersetzen. Das können vollflächige Farben sein, aber auch Schlagschatten oder Farbverläufe. Hier kann man allerdings auch keine pauschale Aussage treffen, denn alles hängt letztendlich vom Design ab. Zudem muss man einen guten Mittelweg zwischen Dateigröße und Performance des Banners finden.

2.) Die Qualität eingebetteter Grafiken separat anpassen

In Flash gibt es unter „Einstellungen für Veröffentlichung…“, im Reiter „Flash“, den Punkt „JPEG-Qualität“. Dieser legt, wie der Titel schon sagt, die Qualität aller eingebetteten Grafiken fest. Hier sollte man zu Beginn einen Wert einstellen der für das Auge des Betrachters zumutbar ist, je nach Projekt. Verwendet man mehrere Grafiken in einem Banner, empfiehlt es sich, diese separat zu optimieren. Beispielsweise kann man eine Grafik, die nur kurz über die Bühne fliegt und dem Betrachter ohnehin keine Zeit lässt über die Qualität zu urteilen, noch etwas mehr „runterschrauben“, um Kilobytes zu sparen. Über das Kontext-Menü der Flash-Bibliothek kann man für jede Datei die Qualität separat einstellen.

Globale JPEG-Qualität
Das Einstellen der globalen JPEG-Qualität.

 

Qualitätseinstellungen der Grafik
Das Einstellen der JPEG-Qualität einer einzelnen Grafik.

3.) Zeitleiste statt Code

Der professionelle Flash-Entwickler vermeidet in der Regel Animationen in der Flash-Zeitleiste, da diese recht schwierig anzupassen sind, oder auch zu schlechter Performance beitragen können. Programmierte Animationen sind flexibel und durch Parameter schnell anpassbar. Aber ich habe auch schon die Erfahrung gemacht, durch die Verwendung einer Zeitleisten-Animation bei einfachen Tweens, einige Kilobytes zu sparen. Ich spreche wirklich von sehr einfachen Animationen wie beispielsweise das einfache Einblenden einer Grafik. Ob diese Methode für ein Projekt geeignet ist, hängt von Art und Umfang der Animation ab, und kann nicht pauschal bestimmt werden. Aber es kann durchaus eine Möglichkeit sein, die letzten Kilobytes bis zum Erreichen der 40kb-Marke einzusparen.

Beispiel: Ich verwende gern die beliebte Caurina Tweener-Klasse für Animationen. Möchte ich mein Bild beispielsweise von Links nach rechts hereinfliegen lassen, und die Tweener-Klasse dazu verwenden, muss ich diese importieren und erzeuge damit ca. 8 Kilobyte Extra-Dateigröße, da Flash alle Funktionen der Klasse importiert. Auch diese die ich nicht benötige. Die gleiche einfache Animation durch zwei Keyframes in der Zeitleiste erzeugt, verbraucht nur einen Bruchteil an Speicher.

4.) Transparente Flächen in PNG’s vermeiden

Viele Entwickler (mich in der Vergangenheit eingeschlossen) wissen nicht, dass auch transparente Flächen in PNG-Grafiken Speicherplatz einnehmen. Durch das Beschneiden von transparenten PNG-Grafiken auf das Nötigste, habe ich schon einige Banner enorm optimieren können. Obwohl die Ersparnis im folgenden Beispiel relativ gering ist, kann man bei mehreren oder größeren PNG-Grafiken doch einiges bewirken.

PNG-Transparenz optimieren
PNG-Grafiken auf das Nötigste beschneiden, und Speicherplatz sparen.

5.) Schriften einbetten ist cool, aber brauche ich alle Zeichen?

Man sieht häufig Banner mit Eingabefeldern, beispielsweise die der Immobilien- oder Automobilindustrie, wo man direkt über den Banner, eine Wohnung oder ein Auto nach bestimmten Kriterien suchen kann. Erfordert das Projekt die Einbettung einer speziellen Schrift, sollte man nur die Zeichen einbetten, die wirklich für das jeweilige Eingabefeld benötigt werden. Beispielsweise brauche ich für die Eingabe einer Postleitzahl ganz sicher keine Buchstaben. Flash bietet die Möglichkeit. für jedes Textfeld nur die Zeichen einzubetten die wirklich benötigt werden. Ein nicht ganz unwichtiger Punkt also.

Fazit

Sicherlich gibt es noch weitere Möglichkeiten seine Banner zu optimieren, jedoch möchte ich hier nur diese aufführen, die bei den meisten Projekten von Bedeutung sind. Für Kritik, Lob oder weitere Ideen bin ich jeder Zeit offen. Nutzt dazu gerne die Kommentarfunktion. Vielen Dank für’s Lesen, und schöne Weihnachtstage!