Animierte GIFs und PNGs in E-Mail-Signaturen

Animierte GIFs haben ihren Weg in E-Mail-Signaturen gefunden. Das ist großartig – eine gut gestaltete Animation spricht direkt unser Echsenhirn an und lässt uns ein bewegtes Objekt viel leichter wahrnehmen als jedes statische Bild. Weniger großartig ist jedoch, dass der Grat zwischen „aufmerksamkeitserregend“ und „extrem nervig“ viel schmaler ist als Sie vielleicht denken.

Nachfolgend finden Sie den ultimativen Leitfaden zu animierten GIFs und animierten PNGs in E-Mail-Signaturen. Erfahren Sie, ob Sie sie überhaupt verwenden sollten, wie Sie sie hinzufügen und wie Sie sicherstellen, dass sie nicht nach hinten losgehen.

Suchen Sie einfach nach ein paar Beispielen, um sich inspirieren zu lassen? Hier sind unsere 5 neuesten animierten E-Mail-Signaturdesigns

Technische Erklärung animierter GIFs

Im Allgemeinen sind animierte GIFs wahrscheinlich die einfachste Form der Animation. Technisch gesehen ist ein GIF eine Reihe von Bildern (oder Frames), die nacheinander angezeigt werden, um Bewegung zu imitieren. Wenn Sie ein GIF zerlegen, enthält jeder seiner Frames ein Bild und die zugehörigen Timing-Daten. Schließlich enthält die GIF-Datei ein „Flag“, das festlegt, ob die Animation endlos wiederholt oder nur einmal abgespielt werden soll. Natürlich steckt hinter GIFs noch mehr, aber aus Sicht von E‑Mail-Signaturen ist dieses Wissen ausreichend.

Die Einfachheit eines GIFs ist seine Stärke. Es gibt unzählige animierte GIFs im Internet, und ein eigenes zu erstellen, ist keine Raketenwissenschaft. Es gibt sowohl kostenlose als auch kostenpflichtige Produkte, mit denen Sie solche einfachen Animationen gestalten können. Eines der besseren Beispiele ist Canva.

Da das GIF-Format so einfach ist und GIFs keine ausgefeilten Codecs oder Skripte benötigen, werden sie nahezu überall unterstützt. Andererseits kann die Dateigröße Ihres GIFs rasant ansteigen – selbst wenn scheinbar nicht viel passiert, da jeder Frame ein eigenes Bild ist. Zum Beispiel hatte ich, bevor ich mich damit auskannte, versucht, einen fließenden Übergang zwischen zwei kleinen JPG-Fotos zu erstellen. Trotz des kleinen Formats und der kurzen Animation habe ich es auf 20 MB gebracht. Das sollten Sie beim Designen berücksichtigen, um Leistungsprobleme zu vermeiden.

Aber Moment – ich hatte ja versprochen, auch auf animierte PNGs einzugehen, und bisher tendiert der Artikel klar zu animierten GIFs. Lassen Sie es mich erklären…

Animiertes GIF vs. animiertes PNG

Ein animiertes PNG (APNG) ist eine starke Alternative zu Ihrem üblichen animierten GIF. Animierte PNGs können entweder die Dateiendung *.apng oder einfach *.png verwenden. Es ist in fast jeder Hinsicht besser. Sehen Sie selbst:

Zusammenfassend lässt sich sagen, dass die meisten animierten PNG-Dateien unvergleichlich besser aussehen als ihre GIF-Versionen und dabei eine ähnliche Dateigröße haben. Es gibt nur einen Haken: APNG-Dateien werden nicht so universell unterstützt. Ein ganz normales GIF funktioniert praktisch überall, während animierte PNGs in aktuellen Versionen aller wichtigen Browser unterstützt werden sollten, darunter Mozilla Firefox, Google Chrome, Microsoft Edge, Safari, Brave und Opera. Was den Internet Explorer betrifft: beschwören wir lieber nicht die Toten.

Die Animationsunterstützung in Webbrowsern ist heutzutage ziemlich solide, aber E-Mail-Apps (Clients) können eine andere Geschichte sein – insbesondere bei APNGs.

Unterstützte E-Mail-Clients

Wenn es um das Versenden animierter GIFs geht, reicht jeder E-Mail-Client aus, der das HTML-Format unterstützt. Wenn Sie Ihre Nachricht im Nur-Text-Format senden, funktioniert das nicht. In diesem Fall würden allerdings auch keine statischen Bilder funktionieren.

Derzeit unterstützen die meisten E-Mail-Clients animierte GIFs auch auf Empfängerseite. Unten finden Sie eine Liste von E-Mail-Clients, die Animationen problemlos darstellen sollten:

Habe ich Ihre E-Mail-App nicht erwähnt? Lassen Sie es mich in den Kommentaren wissen!

Wie Sie sehen, sollten alle webbasierten E-Mail-Clients (wie Outlook im Web (OWA), Outlook.com, Gmail oder Yahoo) keine Probleme damit haben, animierte GIFs anzuzeigen. Auch mobile Outlook-Versionen sowie native Android- und iPhone-Mail-Apps zeigen animierte GIFs normal an. Bei einem animierten PNG gibt es dagegen keine Garantie, dass Ihre Empfänger es jemals in Bewegung sehen. Wenn ein APNG nicht animiert wird, sieht ein durchdacht gestalteter erster Frame trotzdem deutlich besser aus als ein statisches GIF – besonders im Dunkelmodus.

Bei den Desktopversionen von Outlook bedarf die Sache einer kurzen Erklärung.

Wie das klassische Outlook Ihre animierten GIFs möglicherweise abspielt

Wenn es um die Darstellung animierter GIFs geht, gleicht Outlook einer echten Achterbahnfahrt:

• Die neuesten Versionen von Outlook für Microsoft 365, Outlook 2019 (und neuer) und (überraschend) Outlook 2003 unterstützen GIFs nativ.
• Wenn man mit der Maus über ein GIF fährt, wird eine Play-/Pause-Taste angezeigt.
• Ältere Builds zeigen möglicherweise nur den ersten Frame mit einem Play-Button-Overlay an oder…
• Spielen das GIF dreimal ab und frieren dann ein.
• Die GIF-Wiedergabe lässt sich unter Datei > Optionen > Erweitert > Anzeige > Animierte GIFs wiedergeben deaktivieren oder aktivieren.

Outlook-Versionen zwischen 2003 und 2019 unterstützen keine animierten GIFs. Die einzige Möglichkeit, die Animation zu sehen, ist die Option „Im Browser anzeigen“.

Die obigen Informationen stellen kaum eine vollständige Liste der unterstützten E-Mail-Clients dar. Aber darum geht es nicht. Es geht darum, dass das animierte GIF oder APNG möglicherweise überhaupt nicht animiert wird – entweder aufgrund der Version des E-Mail-Clients Ihres Empfängers oder aufgrund nicht standardmäßiger Einstellungen. Wenn Sie Ihr Logo animieren möchten, müssen Sie sich fragen, ob Sie bereit sind, das Risiko einzugehen, dass das wichtigste Element Ihres Designs nicht angezeigt wird, und was Sie tun, falls es am Ende doch nicht animiert wird. Der erste Frame des GIFs/PNGs ist entscheidend.

Vor- und Nachteile animierter GIFs in E-Mail-Signaturen

Bevor Sie eine Reihe von Animationen in Ihre E-Mail-Signatur einbauen, lohnt sich ein Blick auf die Vor- und Nachteile. Oder genauer gesagt, auf die möglichen Vorteile und Risiken der Verwendung animierter GIFs in E-Mail-Signaturen. Von der richtigen Art von GIF profitieren Sie wahrscheinlich – mit der falschen gehen Sie eher ein Risiko ein.

Mögliche Vorteile

Beachten Sie, dass ein animiertes GIF nicht auf magische Weise alle folgenden Vorteile wahr werden lässt. Selbst dann nicht, wenn Sie Ihrer Animation einen Zauberstab hinzufügen. Sie müssen Ihre E-Mail-Signatur als Ganzes sorgfältig zusammenstellen und dafür sorgen, dass sie mit Ihrer visuellen Identität übereinstimmt.

1. Lenken Sie die Aufmerksamkeit auf Ihre Marketingkampagnen. Manchmal reicht schon eine leichte Bewegung aus, damit Ihre potenziellen Kunden einen Blick auf Ihr neuestes Sonderangebot werfen.
2. Zeigen Sie Ihren Kunden, dass Sie E-Mails wie ein Profi beherrschen. Die richtige Art von GIF – eine flüssige und gut aussehende Animation, die gut zum Rest der Signatur passt – vermittelt wahrscheinlich einen professionellen Eindruck und schafft langfristiges Vertrauen. Das ist der wichtigste Grund für die Verwendung professioneller E-Mail-Signaturen.
3. Sagen Sie mehr als mit einem statischen Bild. Natürlich haben Animationen mehr Potenzial als statische Bilder. Daher können Sie GIFs für mehr nutzen, als nur Aufmerksamkeit zu erregen. Mit genügend Kreativität können Sie beispielsweise zeigen, was Ihr Unternehmen macht, oder seine Mission vermitteln.
4. Ihr Einstieg in die Welt der Animation. Ein animiertes Logo eignet sich beispielsweise hervorragend als Teil Ihres Produktvideos. Wenn Sie es für eine E-Mail-Signatur animieren, können Sie es auf viele verschiedene Arten wiederverwenden – unter anderem auf verschiedenen Landingpages, in Produktvideos und mehr.

Wenn Sie sich entscheiden, animierte E-Mail-Signaturen in Ihre Kommunikation einzubinden, sollten Sie Ihre E-Mail-Signaturen in der gesamten Organisation vereinheitlichen. Das sorgt für ein einheitliches Branding und vermittelt den Eindruck, dass Ihr Unternehmen professionell ist. Erfahren Sie mehr über die Automatisierung von E-Mail-Signaturen

Risiken

Nicht Nachteile – Risiken. Sie hängen alle von Ihrer Zielgruppe, Ihren Designentscheidungen und davon ab, ob Sie den Tipps-Abschnitt sorgfältig gelesen haben.

1. Animierte GIFs können lästig sein. Tatsächlich ist es äußerst einfach, ein nerviges GIF zu erstellen. Versuchen Sie, sich auf ein komplexes Problem oder etwas Ernstes zu konzentrieren, während in Ihrem Augenwinkel etwas blinkt, sich bewegt und herumspringt.
2. Ihre Empfänger sehen die Animation möglicherweise nicht. Wie ich oben erwähnt habe, gibt es einige E-Mail-Clients, die animierte GIFs nicht unterstützen. Noch weniger Apps unterstützen animierte PNG-Dateien. Darüber hinaus können Empfänger eine Option oder ein Add-in verwenden, das genau dazu dient, Animationen zu blockieren. Warum? Werfen Sie zunächst einen Blick auf Risiko Nummer 1 oben. Deshalb müssen Sie sicherstellen, dass Sie genau wissen, was passiert, wenn jemand Ihre E-Mail erhält (siehe den Tipps-Abschnitt unten).
3. Animierte E-Mail-Signaturen können die E-Mail-Größe erheblich erhöhen. Wie ich bereits erwähnt habe, ist es einfach, riesige animierte GIFs zu erstellen. Wenn Sie sie in Ihre E-Mail-Signatur einbetten, können Spamfilter anschlagen. Außerdem kann dies dazu führen, dass Ihre E‑Mails lange laden und Ihr Postfach sowie die Postfächer anderer überlasten. Wenn Sie Ihre GIFs hosten und als verknüpfte Bilder hinzufügen, sollte die Größe der E-Mails gering bleiben. Das Problem des langsamen Ladens lösen Sie damit jedoch nicht, und Sie könnten trotzdem Anti-Spam-Filter und andere Schutzmechanismen auslösen.

Tipps zur Verwendung animierter GIFs

Seien Sie subtil

Selbst die beste Animation wird Ihre Empfänger irgendwann dazu bringen, sich die Haare zu raufen, wenn sie oft genug wiederholt wird. Oder Sie als Spammer und Bedrohung für die Gesellschaft zu melden. Um sicherzustellen, dass Sie es nicht übertreiben, öffnen Sie ein Fenster mit Ihrem animierten GIF neben Ihren E-Mails und prüfen Sie, ob diese Ansicht Ihre Augen erfreut oder Sie eher nervös macht.

Endlosschleife oder einmalige Animationen?

Beide Optionen können in Ihren E-Mail-Signaturen gut aussehen. Einmalige Animationen bieten mehr Raum für Kreativität, werden aber leicht übersehen. Bei Endlosschleifen müssen Sie besonders darauf achten, dass sie nicht zu schnell ablaufen oder zu häufig wiederholt werden.

Achten Sie auf die Größe!

Selbst eine einfache Animation kann leicht 1 MB überschreiten, was für E‑Mail-Signaturen bereits grenzwertig ist. Große Dateien können dazu führen, dass E-Mails verzögert zugestellt oder von Spam-Filtern blockiert werden. Halten Sie es einfach und optimieren Sie die Dateigröße. Sie wollen doch nicht das Internet kaputtmachen, oder? Lesen Sie mehr über E-Mail-Signatur-Etikette

Vergessen Sie den Dunkelmodus nicht!

Das Fehlen von Halbtransparenz (oder teilweiser Transparenz) kann Ihr Design besonders im Dunkelmodus beeinträchtigen. Glatte Kanten lassen sich kaum erzielen. Dem könnten Sie entgegenwirken, indem Sie stattdessen animierte PNGs verwenden, doch diese Dateien werden nicht überall unterstützt.

Kurz gesagt: entweder müssen Sie die vollständige Kompatibilität mit dem Dunkelmodus opfern oder mit der richtigen Art animierter GIFs clever vorgehen. Erfahren Sie mehr über E-Mail-Signaturen vs. Dunkelmodus

Womit sollte man anfangen?

Ein Logo, das wie aus dem Nichts auftaucht, mag zunächst wie ein guter Einstieg wirken. Doch auch wenn es großes „sieht wirklich gut aus“-Potenzial hat, ist es bei Signaturen riskant. Am Ende sehen Ihre Empfänger möglicherweise nur ein leeres Quadrat – keine Animation und nicht einmal ein statisches Bild. Dem können Sie entgegenwirken, indem Sie das Logo im ersten Frame der Animation in seiner ganzen Pracht anzeigen und es erst später in der Schleife verschwinden und wieder erscheinen lassen. Experimentieren Sie ruhig ein wenig damit.

Womit sollte man abschließen?

Auch wenn es zu offensichtlich klingt, ist es in der Regel am besten, mit demselben Frame zu enden, mit dem die Animation beginnt, um eine nahtlose Schleife zu gewährleisten. Wenn Sie diesen Schritt überspringen, wirkt Ihre Animation wahrscheinlich holprig oder unfertig.

Testen Sie Ihre E-Mail-Signatur

Testen Sie sie vor dem Rollout. Achten Sie auf Qualitätsverlust, Glitches und Artefakte. GIFs sind für solche Probleme extrem anfällig.

Wie Sie animierte GIFs zu E-Mail-Signaturen hinzufügen

Nun, dieser Teil ist einfach. Sie fügen sie genauso hinzu, wie ein statisches PNG- oder JPG-Bild.

Tipps zum Hinzufügen als verknüpfte Bilder finden Sie in diesem Artikel: Direkter Link zu einem gehosteten Bild in E-Mail-Signaturen. Anschließend können Sie Ihre GIFs mit dem kostenlosen E-Mail-Signaturgenerator zu einem E-Mail-Signaturdesign Ihrer Wahl hinzufügen. So können Sie ganz einfach eine professionelle E-Mail-Signatur erstellen, die gut aussieht und funktioniert.

Beispiele animierter GIFs in E-Mail-Signaturen

Sie können die folgenden Beispiele für animierte GIFs als Referenz und Inspiration für Ihre eigenen Projekte verwenden. Oder um eine Vorstellung davon zu bekommen, was bei E-Mail-Signaturen funktioniert. Alle folgenden GIFs werden in einer Endlosschleife abgespielt, weil das die natürlichste Einstellung für animierte E-Mail-Signaturen ist.

All diese Signaturdesigns finden Sie in unserem kostenlosen E-Mail-Signaturgenerator!

BeaseFox – animierte Signatur

Das BeaseFox-Logo zeigt, dass Sie keine komplexen Animationen erstellen müssen, um die Aufmerksamkeit Ihrer Empfänger zu erregen. Drei einfache animierte Aktionen machen das Logo sichtbar. Gleichzeitig sorgt die kurze Animation in Kombination mit einer längeren Pause dafür, dass Ihre Empfänger konzentriert bleiben, anstatt ständig abgelenkt zu werden. Wichtig ist außerdem, dass die Animation zum Rest des Designs passt – das animierte GIF hat genau die richtige Größe und verwendet ähnliche Farben.

PadBox – animiertes Logo

Das obige animierte Logo ist komplexer. Dank der größeren Abmessungen des GIFs lässt sich mehr ausdrücken. Eine Animation wie diese eignet sich besonders gut für kurze, informative E-Mails. Bei GIFs mit Verschwindeeffekten ist es wichtig, den ersten Frame auf das vollständige Logo zu setzen, falls bei dem Empfänger keine Animationen angezeigt werden. Außerdem bleibt dieses GIF dank seines vollfarbigen Hintergrunds auch im Dunkelmodus von E-Mail-Apps unverändert gut dargestellt.

BotClock – Animation

Das BotClock-Logo enthält eine kurze Schreibanimation. Solche Animationen funktionieren besonders gut, wenn Ihr Logo kalligrafischen Text enthält. Die Platzierung verlinkter Social Media Icons neben dem Logo erhöht die Wahrscheinlichkeit, dass Ihre Empfänger Ihre Profile besuchen werden. Und ja, das machen Menschen oft, um zu überprüfen, mit wem sie es zu tun haben. Verlinken Sie also auf jeden Fall die Profile, auf denen Sie am aktivsten sind.

StreamWatch – animierte Signatur

Das animierte Logo von StreamWatch ist dezent, fällt aber dennoch ins Auge. Da das Logo nicht den Großteil des Signaturdesigns einnimmt, kann man sich leicht auf andere Elemente konzentrieren, insbesondere auf das Banner. Nutzen Sie es, um Ihre Produkte, Dienstleistungen oder Inhalte zu bewerben. Dieses schlanke Layout sieht auf Mobilgeräten besonders gut aus.

Der einfachste Weg, eine animierte E-Mail-Signatur zu erstellen

Alle diese animierten Beispiele sind in unserem kostenlosen E-Mail-Signaturgenerator verfügbar. Sie können jedes unserer E-Mail-Signaturdesigns verwenden, um Ihre eigene animierte E-Mail-Signatur zu erstellen. Das Einzige, was Sie brauchen, ist Ihr eigenes animiertes GIF.

Suchen Sie nach weiterer Inspiration? Hier entlang!

Möchten Sie mehr über E-Mail-Signaturen erfahren? Werfen Sie einen Blick in unsere Wissensbank, um alles über E-Mail-Signaturen zu erfahren.

Weitere Artikel:

• Outlook: E-Mail-Signatur mit verlinktem Bild / Bild aus dem Internet erstellen
• Emoji in E-Mail-Signaturen – wie fügt man sie hinzu und warum sollte man das nicht tun ¯ \ _ (ツ) _ / ¯?