Animierte GIFs in E-Mails: 10 Tipps, um die Dateigröße klein zu halten
Veröffentlicht: 2019-12-20Überraschend. Unterhaltsam. Informativ. GIFs sind all diese Dinge, und Vermarkter und Kunden lieben diese lustigen E-Mail-Ergänzungen gleichermaßen. Aber wissen Sie, was GIFs noch sein können? Groß. Es ist leicht, dass eine GIF-Datei zu aufgeblähten, gigantischen Proportionen anwächst, die die Ladezeiten von E-Mails beeinträchtigen.
Was also soll ein E-Mail-Marketer tun? Evan Diaz, Lead Designer bei Lucky Red Pixel, hat die Antworten. Hier ist, was wir aus seiner Litmus Live-Präsentation „Erstellen von Animationen, die Abonnenten begeistern und helfen“ gelernt haben.
Winzig, aber mächtig: Warum es so wichtig ist, die GIF-Dateigröße gering zu halten
Große GIFs führen zu langsamen E-Mail-Ladevorgängen oder -Downloads, die den Telefondatentarif eines Abonnenten auffressen. Beides kann die Abonnenten frustrieren, was Ihre ganze harte Arbeit gefährdet und die Leistung Ihrer Kampagnen beeinträchtigt. Aus diesem Grund ist es eine der wichtigsten Herausforderungen, die GIF-Dateigrößen klein zu halten, die E-Mail-Marketer meistern müssen, wenn sie die Leistungsfähigkeit von animierten GIFs in ihren E-Mail-Kampagnen nutzen möchten.
Wie groß darf ein GIF in einer E-Mail sein?
Im Allgemeinen gilt: Je kleiner Ihr GIF ist, desto schneller wird es in Ihren E-Mails geladen – und je kürzer Ihre Ladezeiten, desto besser ist das Erlebnis für Ihre Abonnenten. Aber was ist die maximale Dateigröße, die für ein GIF akzeptabel ist? Evan empfiehlt, Dateien unter 5 MB aufzubewahren. Bei 5 MB muss ein Abonnent wahrscheinlich nur wenige Sekunden warten, bis die Bilder geladen sind. Hier bei Litmus versuchen wir, GIFs unter 1 MB zu halten, um schnelle Ladezeiten zu gewährleisten und nicht zu viele Daten unserer Leser zu verschlingen, wenn sie unterwegs unsere E-Mails auf dem Handy öffnen.
Konzentrieren Sie sich auf die Optimierung der Dateigröße während des gesamten GIF-Erstellungsprozesses
Die Reduzierung der GIF-Dateigröße beginnt auf dem Zeichenbrett. Sobald Sie eine Idee für Ihr GIF haben, gibt es einige Designentscheidungen, die Sie treffen können, um die Größe in Schach zu halten. Wenn es darum geht, Ihr GIF in Photoshop zu verfeinern und für die Verwendung in E-Mails zu verarbeiten, gibt es zusätzliche Tricks, mit denen Sie verhindern können, dass Ihre GIFs zu schwer werden. Hier sind die zehn wichtigsten Tipps, um GIF-Größen klein zu halten:
1. Halten Sie sich an einfachere (AKA schnellere) Übergänge
Wenn Ihre Animation Übergänge enthält, bleiben Sie bei „Schnitten“ statt „Überblendungen“. Während Schnitte von einem Bild zum nächsten springen, brauchen Fades ihre Zeit, um dieselbe Botschaft zu vermitteln. Fades beinhalten mehr Frames, mehr Farben und kommen daher mit größeren Dateigrößen. Das folgende Beispiel zeigt, wie signifikant die Auswirkungen eines Fade-Übergangs auf die Dateigröße sind. Wenn Sie einem einfachen Schnittübergang einen Fade-Effekt vorziehen, ist Ihre GIF-Datei 7,8-mal größer.

Kein Fan von Schnittübergängen? Evan schlägt vor, einen „übersetzen“-Übergang zu verwenden, bei dem ein Frame über das vorherige Bild gleitet. Auf diese Weise erhalten Sie interessante Bewegungen, ohne die Datei mit mehr Farbübergängen von einem Fade zu verzetteln.
2. Verwenden Sie nach Möglichkeit Illustrationen über Fotos
Auf die gleiche Weise, wie die Verarbeitung von mehr Farben in einem Überblendungsübergang die GIF-Dateigröße erhöht, erhöhen sich auch die komplexen Farben in Fotos. Illustrationen haben mehr einfarbige Komponenten als ein Foto oder Video, was sie in der Regel weniger schwer macht.

Es verwendet viele Farben, so dass die Auswirkungen auf die Dateigröße enorm sind.
Ein weiterer Vorteil von Illustrationen mit einfachen Farben besteht darin, dass Sie mehr Bewegung und Animation mit einer geringeren Dateigröße integrieren können. Subtile Änderungen in einem Foto sind umständlicher zu laden als mehrere animierte Frames für eine Illustration, die eine Geschichte erzählt. Wenn es um die Verwendung eines Fotos geht, sollten Sie den animierten Teil isolieren. Anstatt dass das gesamte Bild ein GIF ist, können Sie die Dateigröße erheblich verringern, indem Sie alle sich nicht bewegenden Abschnitte als Bilder belassen.
3. Überlagern Sie Farben, um die Farbpalette in Fotos einzuschränken
Eine andere Möglichkeit, die Dateigröße zu verringern, wenn Sie ein Foto oder Video verwenden müssen, besteht darin, dem GIF eine einzelne Farbe zu überlagern. Ein monochromes Overlay verleiht dem GIF einen markengerechten Farbton und begrenzt die Anzahl der verschiedenen Farben, die das GIF verarbeiten muss. Das Ergebnis: kleinere Dateigrößen!

4. Wenn Sie ein Video in ein GIF umwandeln, importieren Sie jeden zweiten Frame in eine Ebene
Photoshop konvertiert Ihre Videoframes in Ebenen, wenn Sie Datei > Importieren > Videoframes in Ebenen auswählen. Dies ist ein praktisches Werkzeug, aber es kann zu einer außer Kontrolle geratenen GIF-Dateigröße führen, wenn Sie nicht aufpassen.
Optimieren Sie Ihre Dateigröße, indem Sie die Ebenen auf alle 2 Frames beschränken. Bei dieser Option wird jeder zweite Frame benötigt, um Ebenen zu erstellen, wodurch die Dateigröße reduziert wird. Wenn es nicht ausreicht, die Ebenen auf jeden zweiten Frame zu reduzieren, stellte Evan fest, dass es immer noch ein guter Anfang ist, wenn Photoshop nur einen von 4 Frames aufnimmt.


5. Löschen Sie doppelte Frames
Denken Sie daran: Je mehr Frames Sie in Ihrem GIF verwenden, desto größer ist die Dateigröße. Nachdem Sie Ihr GIF in Photoshop importiert haben, können Sie sich die Animation Bild für Bild ansehen. Wenn es mehrere Ebenen mit demselben Rahmenbild gibt, geben Sie den Duplikaten den Boot.
Hier bei Litmus verwenden wir oft EZGIF , um unsere animierten GIFs zu optimieren. Der kostenlose Online-GIF-Optimierer bietet Ihnen die Möglichkeit, doppelte Frames einfach zu löschen, wenn Sie keinen Zugriff auf Photoshop oder ein ähnliches Tool haben.
6. Wenn Sie doppelte Frames entfernen, passen Sie die Verzögerung an, um das GIF im Tempo zu halten
Wenn Sie Frames aus Ihrem GIF entfernen, müssen Sie die Frameverzögerung ändern, damit das GIF-Timing gleich bleibt. „Halten“ Sie einfach den einzelnen Frame so lange, wie es gedauert hätte, die gelöschten Duplikate zu durchlaufen – so halten Sie das GIF im Takt.
Denken Sie daran, dass es sich bei GIFs um eine einfache umgekehrte Beziehung handelt: Je höher die Bilder pro Sekunde, desto weniger Ruckler bei der Wiedergabe. Eine Verzögerung von .03 ist wahrscheinlich die Standardeinstellung, die Photoshop Ihrem hochgeladenen GIF gibt, wodurch eine 30-FPS-Animation erstellt wird, die sehr reibungslos geladen wird. Aber je mehr Frames Sie pro Sekunde laden müssen, desto größer wird Ihre Datei. Sie sollten den Sweet Spot finden, der Ihre Animation flüssig genug hält und gleichzeitig die Dateigröße niedrig hält.
7. Wählen Sie die adaptive Farbreduktion
Wenn Sie Ihr GIF für das Web speichern, stehen Ihnen einige Optionen zur Farbreduzierung zur Verfügung. Evans Best-Practice-Vorschlag lautet „adaptive“ Farbreduktion. Dieser Algorithmus tastet Farben ab, die in einem Bild am häufigsten vorkommen, und bietet ein ausgewogenes Verhältnis zwischen Dateigröße und Farbtreue.
8. Lassen Sie „Transparenz“ eingeschaltet
GIFs werden oft schlecht transparent behandelt und weisen einen harten weißen Rand um Elemente auf, wenn sie auf einem transparenten Hintergrund eingestellt sind. Wenn Sie Animationen auf einem transparenten Hintergrund verwenden möchten, sind animierte PNGs der richtige Weg . Was macht das Kontrollkästchen „Transparenz“ in Photoshop eigentlich? Es ermöglicht, dass Pixel, die sich von Frame zu Frame nicht geändert haben, unverändert bleiben. Das bedeutet, dass Bereiche im GIF, die von einem Frame zum nächsten konstant bleiben, nicht neu geladen werden müssen. Evan schlägt vor, dies die meiste Zeit eingeschaltet zu lassen, da es Ihre Dateigröße um ein Drittel oder mehr reduzieren kann.

9. Gleichen Sie die Farbtabelle mit Dither aus
Beim Export haben Sie auch die Möglichkeit, die Anzahl der in der Farbtabelle der Bilddatei gespeicherten Farben anzupassen. Je geringer die Anzahl der Farben, desto kleiner die Dateigröße. Um die beste Kombination aus optimierter Dateigröße und Farbtreue zu erhalten, wählen Sie:
- 128-256 Farben für Videos
- 64-128 Farben für animierte Illustrationen
Wenn Sie Ihre Dateigröße wirklich verfeinern möchten, können Sie Ihre Farbtabellenänderungen mit dem Dither-Prozentsatz kombinieren. Ein höherer Dither-Prozentsatz führt zu glatteren Farbverläufen, selbst bei einer begrenzten Farbtabelle. Eine Graustufe mit nur 8 Farbstreifen wird beispielsweise zu einem glatten Farbverlauf mit aktiviertem 100% Dither. Ein höheres Dithering in Kombination mit einer Farbtabelle am unteren Ende für Videos könnte der Sweet Spot für ein GIF sein, das gut aussieht und dennoch schnell geladen wird.
10. Reduzieren Sie einfach die Videoqualität und Dateigröße mit Lossy
Möchten Sie die Größe Ihrer GIF-Datei optimieren, ohne all die feinen Anpassungen an Farbtabellen und Dithering vornehmen zu müssen? Die Auswahl einer Verluststufe von 20 % bis 40 % reduziert die Dateigröße und eine gewisse Qualität auf einen Schlag. Sie können mit diesen Prozentsätzen herumspielen, um die richtige Balance zwischen Qualität und Dateigröße zu finden.
Sehen Sie sich Evans vollständigen Litmus Live-Talk an
Suchen Sie noch mehr Tipps, wie Sie Animationen erstellen, die Abonnenten begeistern und helfen? Sie können Evans vollständigen Litmus Live-Talk unten sehen!
Was ist Ihr Geheimnis bei der Optimierung animierter GIFs für E-Mails?
Großartige GIFs können einer E-Mail Kontext und Spaß verleihen, während ein schlecht gewordenes GIF von der Nachricht ablenken oder Abonnenten dazu bringen kann, Ihre E-Mails ganz zu vermeiden. Was sind Ihre Tricks, um animierte GIFs für E-Mails zu optimieren? Wir würden uns freuen, sie unten in den Kommentaren zu hören!