Animierte PNGs in E-Mails: Eine Alternative zu GIFs?

Animierte Bilder sind einer der wichtigsten E-Mail-Designtrends für 2019 . E-Mail-Marketer auf der ganzen Welt versuchen, ihren Kampagnen Bewegung zu verleihen – und die beliebteste Methode dafür ist die Nutzung animierter GIFs.

Animierte GIFs sind jedoch nicht der einzige Dateityp , mit dem Sie Bildern Bewegung hinzufügen können. Animierte tragbare Netzwerkgrafiken – oder APNGs – sind eine Option, die Sie vielleicht auch erkunden möchten.

Gründe für die Verwendung von APNGs in E-Mails

Ein animiertes PNG ist genau das, was der Name vermuten lässt: eine Sammlung von PNGs, die kombiniert werden, um Bewegung einzuleiten. Um also zu verstehen, was ein APNG so besonders macht, ist es wichtig, die Eigenschaften eines einfachen PNG zu verstehen.

Es gibt zwei Arten von PNG-Formaten: PNG-8 und PNG-24. Das PNG-8-Format ähnelt GIFs darin, dass sie mit maximal 256 Farben gespeichert werden. Das PNG-24-Format kann Millionen von Farben darstellen. Im Vergleich zu den begrenzten Farben eines GIF, die Animationen oft ein minderwertiges Aussehen verleihen, können Sie mit APNGs die gesamte Palette an Farbtiefen nutzen . Das verleiht Ihren Bildern ein schärferes Aussehen – insbesondere, wenn Sie mit einer breiten Farbpalette fotografieren –, aber eine höhere Qualität hat immer ihren Preis. Wenn Sie Ihre Dateigrößen nicht sorgfältig überwachen, können PNGs ziemlich groß werden. Wenn Sie viele davon verwenden, um ein APNG zu erstellen, können sich die großen Dateigrößen negativ auf Ihre E-Mail-Ladezeiten auswirken.

Außerdem können Sie mit APNGs im Gegensatz zu GIFs mit Transparenz arbeiten . GIFs werden schlecht transparent behandelt und weisen einen rauen weißen Rand um Elemente auf, wenn sie auf einem transparenten Hintergrund eingestellt sind:

Warum sollten Sie eine Animation auf einem transparenten Hintergrund verwenden, fragen Sie?

Transparenz und Animationen in E-Mails: APNGs im Oktober-Newsletter von Litmus

Für unseren diesjährigen Halloween-Newsletter im Oktober wollten wir unseren Lesern die Möglichkeit geben, „das Licht auszuschalten“ und die E-Mail von einem hellen Design in ein dunkles und gruselig zu ändern. Für noch mehr Gruseligkeit haben wir uns außerdem entschlossen, einige Animationen einzufügen, damit gruselige Augen im Dunkeln blinzeln, Geister schweben und Glibber tropfen – aber nur, wenn das Licht ausgeschaltet ist.

Um die Animationen in der hellen Version der E-Mail auszublenden, haben wir sie in derselben Farbe gestaltet wie der Hintergrund, auf dem sie in der hellen Version platziert wurden. Als ein Abonnent „das Licht ausschaltete“, änderten sich diese Hintergrundfarben und – Überraschung – machten unsere gruseligen Animationen sichtbar!

Damit dieser Trick funktionierte, mussten die Animationen auf einem transparenten Hintergrund leben – und genau deshalb kam der Einsatz von GIFs für uns nicht in Frage. Hätten wir ein GIF verwendet, würden Sie diese weißen Ränder um unsere Illustrationen herum sehen, die bei eingeschaltetem Licht unordentlich ausgesehen und unsere versteckten Grafiken freigelegt hätten. Animierte PNGs hingegen meistern die Herausforderung der Transparenz perfekt.

Wir haben eine alternative Taktik in Betracht gezogen, um dieses Problem zu lösen, indem wir ein Sprite-Sheet von PNGs mit CSS-Animations-Keyframing animieren . Aber im Rahmen dieses Projekts hätte der CSS-Anteil für jede Grafik zu einer zu codelastigen E-Mail geführt. Und noch wichtiger ist, dass die E-Mail-Client-Unterstützung für animierte PNGs in den letzten Jahren die Unterstützung für CSS-Animation überholt hat .

E-Mail-Client-Unterstützung für APNGs

Viele beliebte E-Mail-Clients bieten volle Unterstützung für APNGs. Die problematischsten Ausnahmen sind Gmail (sowohl der Webmail-Client als auch die mobilen Apps), Outlook.com und Outlook unter Windows. Diese E-Mail-Clients zeigen nur den ersten Frame der Animation.

Animierte PNGs werden vollständig unterstützt in:

• Apple-Mail
• iOS
• Samsung Mail
• Outlook (MacOS)
• Outlook.com
• Outlook.com-App
• AOL
• AOL-App
• Yahoo
• Yahoo-App

Nur der erste Frame wird angezeigt in:

• Google Mail
• Gmail-App
• Outlook (Windows)

So erstellen Sie animierte PNGs für Ihre E-Mail-Kampagnen

Es ist derzeit nicht möglich, Animationen als APNGs aus Software wie Adobe Photoshop oder Adobe Animate zu speichern, daher benötigen Sie zusätzliche Tools, um Ihre Animationen zu erstellen. So haben wir die animierten PNGs für unseren Newsletter erstellt:

1. Erstellen Sie Ihre Animation in Adobe CC und speichern Sie jeden Frame als PNG

Wir verwenden Adobe Animate, um unsere Animationen zu erstellen – egal ob GIF oder APNG. Der Unterschied besteht jedoch darin, dass Adobe Animate keine native Option zum Exportieren einer APNG-Datei bietet. Stattdessen müssen Sie jeden Frame als einzelnes PNG exportieren. Nachdem Sie Ihre Animation erstellt haben, gehen Sie zu Exportieren > Film exportieren und wählen Sie „PNG-Sequenz“ aus dem Dropdown-Menü.

Der Vorgang in Photoshop ist sehr ähnlich. Gehen Sie zu Datei > Exportieren > Video rendern . Wählen Sie im Bereich Video rendern „Photoshop Image Sequence“ aus der Dropdown-Liste und wählen Sie PNG als Format. Sie müssen einen weiteren Schritt ergreifen , um sicherzustellen , dass Ihre pngs sind transparent: in den Render - Optionen wählen Feld „Straight - nicht maskiert“ aus dem „Alpha - Kanal“ Dropdown - Menü. Sobald Sie ausgewählt haben , wo möchten Sie Ihre Bilder speichern, drücken Sie die Taste Render.

2. Kombiniere deine individuellen PNGs zu einem APNG

Jetzt ist es an der Zeit, Ihre individuellen Bilddateien zu einem APNG zusammenzustellen!

PNG Animator ist eine großartige Software, die Sie für einen kleinen Preis im Apple App Store kaufen können, wenn Sie ein Betriebssystembenutzer sind. Eine kostenlose Alternative ist der Animated PNG Maker von ezgif.com, der ähnliche Funktionen bietet.

Wir haben uns dafür entschieden, das Online-Tool zu verwenden, um unsere Dateien zu vervollständigen. Hier konnten wir alle Frames ausschließen, die in der endgültigen Datei nicht benötigt wurden, und die erforderliche Zeit für jeden Frame festlegen.

3. Optimieren der APNG-Dateigröße für die Verwendung in E-Mails

Wie GIFs können APNGs schnell ziemlich gewichtig werden. Die Reduzierung der Farben und der Anzahl der verwendeten Bilder trägt dazu bei, die Dateigröße gering zu halten. Die Standard-Zlib-Komprimierung schien die einzige Option zu sein, die für unsere Dateien funktionierte, und sobald wir auf Make APNG! Schaltfläche können wir vor dem Herunterladen ein Beispiel für unsere Animation und ihre Dateigröße sehen. Dies ist eine großartige Gelegenheit, vor dem Herunterladen weitere Änderungen vorzunehmen, z. B. die Geschwindigkeit zu ändern oder ein paar weitere Frames zu entfernen.

Bevor wir unsere Bilddateien zur Verwendung in unserer E-Mail hochgeladen haben, konnten wir sie noch etwas komprimieren. Wir haben unsere APNGs einfach über TinyPNG laufen lassen , das die Dateigröße verringert, indem Metadaten entfernt und Farben reduziert werden, während gleichzeitig Transparenz und Animation erhalten bleiben . Es hat einen großen Unterschied gemacht, indem wir unsere Gesamtgröße der Bilddatei von 943 KB auf 243 KB reduziert haben, was eine Einsparung von über 74 % an Dateigröße bedeutet! Nicht jedes PNG-Komprimierungstool behält jedoch die Animation bei, also überprüfen Sie Ihre Arbeit nach der Verarbeitung Ihrer Bilder.

Und das ist es! Jetzt können Sie Ihrer E-Mail ein APNG hinzufügen, genau wie Sie mit jedem anderen Bildtyp arbeiten würden. Wenn Sie unseren vollständigen Newsletter in Aktion sehen möchten, können Sie ihn hier anzeigen oder den Code in Litmus Builder überprüfen .

Was halten Sie von der Verwendung von APNGs in E-Mails?

Haben Sie schon einmal animierte PNGs in Ihren E-Mail-Kampagnen verwendet? Auf welche Tools verlassen Sie sich, um sie zu erstellen und die Dateigröße gering zu halten? Wir würden uns freuen, von Ihren Erfahrungen zu hören. Teilen Sie Ihre Erkenntnisse in den Kommentaren unten.