Assets für HTML5-Werbemittel optimieren und Dateigröße reduzieren

(c) Unsplash 1 & 2

Die Ladezeit von Websites und Werbemitteln hat direkten Einfluss auf die User Experience und somit den Erfolg einer Kampagne. Beim Optimieren der verwendeten Komponenten gilt es einiges zu beachten. Wir geben Überblick über die wichtigsten Komponenten eines HTML5-Werbemittels sowie Tipps zu deren Optimierung für eine bessere User Experience. 
Es ist wohl allen bekannt, dass die Ladezeit einer Seite die User Experience sowie Performance stark beeinträchtigt. Dasselbe gilt auch für HTML5-Werbemittel, weshalb das Dateigewicht solch eines Werbemittels oft von Publishern eingeschränkt wird. 150-200 KB ist der Standard-Richtwert und in der Regel handelt es sich hier um die gezippte Dateigröße mit allen Assets. Fragen Sie jedoch auf jeden Fall nach der konkreten Spezifikation des Publishers, bevor Sie mit der Erstellung loslegen.

Komponenten eines HTML5-Werbemittels

Ein HTML5-Werbemittel besteht in der Regel aus mehreren Komponenten, die in einer .html-Datei zusammengeführt werden. Es gibt mehrere Möglichkeiten, diese Komponenten zu komprimieren, so dass die Dateigröße verringert und die Ladezeit optimiert werden kann.

Ein HTML5-Werbemittel kann folgende Komponenten beinhalten:

  • HTML
  • CSS
  • Libraries (Javascript, Jquery, GSAP, …)
  • Schriftdateien
  • Bilder
  • Videos


Lass uns die Komponenten einzeln näher betrachten:

HTML, CSS & Libraries

Grundsätzlich lassen sich Codes sehr gut komprimieren. Es gibt sogenannten Minifier online, die einfach zu bedienen sind und auch ein gutes Ergebnis liefern. Es ist davon abzuraten, schwere Libraries zu verwenden. In vielen Situationen kann man auch auf jQuery verzichten und die Zeilen mit JavaScript umschreiben. GSAP ist eine gute Lösung für komplexe Animationen. Ansonsten kann man in Erwägung ziehen, CSS Keyframe-Animationen statt Javascript zu verwenden. Wenn Sie Programme wie Google Web Designer verwenden, können Sie diesen Schritt überspringen, da im Programm eine Funktion beim Exportieren integriert ist, die automatisch Codes minimiert.

Bilder

Mit Codes ersetzen

Viele Bilder lassen sich sehr gut mit reinem CSS und HTML umsetzen (einfarbige Hintergründe, Kreise, Verläufe etc.). Bevor Sie mit der Komprimierung eines Bildes beginnen, überlegen Sie sich, ob dies nicht der Fall wäre.

Vektorgrafik bevorzugen

Illustrationen (wie Logos) lassen sich sehr einfach als .svg (skalierbare Vektorgrafik ohne Qualitätsverlust) exportieren. Damit können Sie Größe reduzieren, insbesondere wenn es sich um größere Bilder handelt.

Online Tools verwenden

Services wie TinyPNG liefern oft ein exzellentes Ergebnis. Komprimieren Sie Ihre Bilder, bevor sie zusammengeführt werden.

Photoshop Export

Exportieren im Photoshop Sie kennen bestimmt die Option “Für Web speichern…”. Im Einstellungsfenster können Sie die notwendige Qualität des Bildes einstellen. Außerdem können Sie auch die Dateigröße vorgeben, so dass Photoshop für Sie die Qualität ausrechnet, die Ihre Vorgabe nicht überschreiten würde.

Videos

Informieren Sie sich rechtzeitig, ob Videos überhaupt bei Ihrem Publisher zugelassen sind. In Google Ads z.B. werden Videos noch nicht unterstützt. In DV360 zählen Banner mit Video-Integration als Rich Media Creatives und müssen über Studio gehostet sein. Generell tendieren Videos dazu, eine große Dateigröße zu besitzen. Überlegen Sie sich in dem Fall genau, ob der Einsatz sinnvoll ist. Mp4 bleibt weiterhin das meist unterstützte Format in allen gängigen Browsern. GIF und Spritesheets sind zwar Alternativen dafür, liefern jedoch nicht immer ein besseres Ergebnis. Probieren Sie aus, welche Methode bei Ihrem Video das beste Ergebnis liefert.

Schriftarten

Standard-Webschriftarten wie Arial müssen nicht extra eingebunden werden. Wenn Sie jedoch benutzerdefinierte Schriftarten verwenden möchten, sollten Sie zuerst nach Alternativen auf Google Fonts, einer Library mit kostenlosen Schriftarten, suchen. Greifen Sie erst auf eigene Schriftarten zurück, wenn Sie dort nicht fündig werden oder aufgrund der strengen Style Guide-Vorschriften nur firmeneigene Schriften verwenden dürfen. In so einem Szenario haben Sie folgende Möglichkeiten:
    1. Die Schriftart wird nur bei einer Textstelle angewendet: Sie können die betreffende Textstelle in eine Vektorgrafik (svg) umwandeln und so die Einbindung einer Schriftart umgehen
    2. Die Schriftart wird öfters gebraucht oder es handelt sich um einen dynamischen Text, der später mit einem Feed verknüpft wird: In so einem Fall raten wir Ihnen, die Schriftart einzubinden. Wählen Sie hier nur die Formate .woff oder .woff2 (diese Option ist in Google Ads nicht zugelassen). Online Tools wie Font Squirrel können Ihnen dabei helfen, ungewollte Charaktere (Subsetting) zu entfernen und die Schriftarten so schlanker zu halten.

Fazit – Die notwendige Qualität verwenden

Wie Sie gesehen haben, gibt es hier sehr viel Raum für Optimierung. Das Wichtigste dabei ist, dass Sie den Optimierungsgrad finden. Worauf kann ich verzichten? Was darf auf jeden Fall nicht pixelig aussehen? Ist mein Werbemittel so einfach aufgebaut, dass ich es auch als AMP-Ad erstellen kann? Ob viel oder wenig, optimieren Sie auf jeden Fall Ihre Assets vor oder beim Zusammenführen der Dateien. Sie werden einen merkbaren Unterschied im Laden Ihres Werbemittels sehen.

Sie möchten lernen, HTML5-Werbemittel für Ihr Online Advertising zu erstellen? Wir beraten Sie gerne!

Hinterlassen Sie einen Kommentar: