Viele Account-Manager wundern sich: Während bei der Freigabe der kreativen Ergebnisse auf dem PC im Büro noch alles gut aussah, muss man bei einer stichprobenartigen Kontrolle der Live geschalteten Banner, zum Beispiel auf dem Smartphone, stutzen. Die Banner wirken total verschwommen und nicht so gestochen scharf wie gewollt.

Grund dafür ist die Retina-Auflösung, die so gut wie alle modernen Smartphones und zunehmend auch viele Laptops (zum Beispiel die neuen Macbooks) mit sich bringen. Durch die Retina Auflösung wirkt das Bild schärfer, ähnlich wie man es von der HD-Auflösung vom TV kennt.

Besonders bei Smartphones, wo wir mit unserem Auge sehr nah am Gerät sind und alles eh etwas kleiner angezeigt wird, macht die höhere Auflösung Sinn. Daher ist es besonders bei mobilen Bannern, aber auch zunehmend bei Kreationen für Desktop, wichtig für die Retina zu optimieren.

Bei einer Retina-Auflösung ist die Pixeldichte verdoppelt. Diese wird mit der Einheit DPI (Dots per Inch) gemessen und zählt die Anzahl der Pixel pro Inch (2,54 cm). Während früher 72 DPIs normal waren, ist bei der Retina-Auflösung 144 DPI gängig.

Um dieser erhöhten, doppelten Auflösung gerecht zu werden, müssen die Banner in der zweifachen Größe angelegt werden. Bei Gif-Bannern ist es ratsam die Banner einfach doppelt so groß, also Breite und Höhe * 2, abzuspeichern. Das 300×250 Pixel Medium Rectangle wird somit zu einem 600×500 Pixel großen Gif. Hochgeladen wird es aber auf dem 300×250 Pixel Werbeplatz und dann vom Adserver automatisch herunter gerechnet.

Für HTML5 Banner sollten alle beinhalteten Grafiken in den doppelten Dimensionen angelegt werden. Das HTML5 Script inkludiert die Grafiken dann in der normalen Größe und für die Schärfe auf Retina Displays ist gesorgt. Werden Schriften über eine Webfont geladen, dann skalieren diese automatisch hoch und runter. Webfonts führen allerdings zu höheren Ladezeiten und bringen zum Teil auch Lizenzprobleme mit sich. Daher werden Texte oft als PNG und keine ganzen Schriftarten eingeblendet.

Die Einblendung von allen Grafiken (Assets) in der doppelten Auflösung bringt jedoch eine Herausforderung mit sich, denn dadurch erhöht sich automatisch die Dateigröße der jeweiligen Bilder – zum Teil enorm. Durch die Restriktionen der Ad-Server ist die Dateigewicht eines Banners aber fast immer limitiert. Während das Google GDN 150 KB zulässt, erleben wir auch oft Limitierungen von 40 KB, besonders bei Bannern für den mobilen Einsatz. Wie oben zu lesen, ist aber gerade bei mobilen Bannern die Optimierung für Retina essenziell. Ein Dilemma.

Wenn die Dateigröße es verbietet, alle Grafiken in doppelter Auflösung anzulegen, sollten zumindest Schriften und Logos in der ausreichenden Größe abgespeichert werden. So ist garantiert, dass Texte lesbar sind und die Marke scharf präsentiert wird. Verschwommene Hintergrundbilder können eher verkraftet werden als unleserliche Werbebotschaften. Zudem können Logos und Schriften in dem Vektor-Dateiformat .svg abgespeichert werden, welches eine unliniierte Skalierung ohne größeres Dateigewicht zulassen.

Benötigen Sie Hilfe Ihre Banner für Retina-Displays zu optimieren oder die Dateigröße zu reduzieren? Wir schauen uns das gerne an und geben Ihnen eine unverbindlichen Einschätzung. Kontaktieren Sie uns einfach.