Animierte E-Mail-Header: GIFs, die schnell laden und gut aussehen

Ein animierter E-Mail-Header sollte ein GIF sein, etwa 1200×600 Pixel, angezeigt mit 600 Breite, mit kurzem Loop, maßvollem Dateigewicht und einem ersten Frame, der allein als fertiges Design funktioniert. Diese letzte Regel wird gern übersehen: Manche Desktop-Versionen von Outlook für Windows zeigen nur den ersten Frame eines animierten GIFs, und wer Bilder blockiert, sieht nichts als deinen Alt-Text. Gestalte zuerst für diese Leser und füge die Bewegung dann als Bonus für alle anderen hinzu.

Warum animierte E-Mail-Header GIFs sind

Video wird in E-Mails selten und unzuverlässig unterstützt. Das animierte GIF, ein Bildformat, wird in den meisten Programmen angezeigt, von Apple Mail bis Gmail. Neuere Formate wie animiertes WebP werden in Postfächern lückenhafter unterstützt. GIF bleibt also die praktische Wahl, mit all seinen Grenzen: höchstens 256 Farben pro Frame und größere Dateien als Video. Diese Grenzen prägen das Design. Den vollständigen Vergleich findest du unter GIF vs. MP4.

Den ersten Frame als Rückfallebene gestalten

Behandle den ersten Frame als den E-Mail-Header und die Animation als Extra. Wischen deine Worte aus dem Nichts herein, sieht ein Outlook-Leser einen leeren Farbblock. Erscheint dein Produkt in Sekunde zwei, sieht er das Produkt nie. Bring alles, was zählt, in Frame eins aufs Bild und lass die Bewegung darum herum passieren.

• Worte still, Hintergrund bewegt. Treibende Farbe hinter einer festen Überschrift ist der verlässlichste animierte Header überhaupt.
• Eine kleine Bewegung. Ein Wort, das wechselt, eine Linie, die sich selbst unterstreicht, eine sanfte Lichtverschiebung. Eine Idee pro Header.
• Dort enden, wo du begonnen hast. Ein Loop, der an den Anfang zurückspringt, wirkt kaputt. Lass den letzten Frame in den ersten übergehen, wie unter Nahtlose Loop-Videos beschrieben.
• Keine Blitze. Halte Helligkeitswechsel langsam. Schnelles Blitzen ist unangenehm und kann schaden.

Das GIF leicht halten

Das meiste Gewicht eines GIFs kommt von Pixeln, die sich zwischen Frames ändern. Ein Header, in dem sich das ganze Bild bewegt, ist schwer; einer, in dem ein langsamer Verlauf hinter stillstehenden Worten treibt, ist viel leichter, weil der Encoder nur speichern muss, was sich geändert hat. Die halbe Breite bedeutet ungefähr ein Viertel der Pixel, entscheide also früh, ob dieser Header 1200 px braucht oder ob 600 px reichen.

1. 1

   In 1200×600 gestalten

   Leg den Header so an, dass alle Worte im ersten Frame an ihrem Platz stehen.

2. 2

   Den Loop kurz halten

   Zwei bis fünf Sekunden, wobei jede Bewegung einen ganzen Zyklus durchläuft.

3. 3

   Als GIF mit 10 bis 15 fps exportieren

   Nutze eine Palette, die aus der Animation selbst gebaut ist, keine generische.

4. 4

   Das Gewicht prüfen

   Ist es schwer, probier 600 px Breite, weniger Frames oder weniger Bewegung, bevor du die Qualität senkst.

5. 5

   Frame eins allein prüfen

   Öffne das GIF in einem Bildbetrachter, der nur den ersten Frame zeigt, oder schick einen Test an Outlook unter Windows.

Die genauen Exportbefehle sowie Einstellungen für Palette und Dithering stehen unter Animierte GIFs.

HTML für einen animierten E-Mail-Header

Code den Header als gewöhnliches Bild in einer Tabellenzelle. Setz die Anzeigebreite sowohl im Attribut als auch im Style, damit jedes Programm ihn richtig skaliert, gib ihm einen beschreibenden Alt-Text und setz für die Zelle eine Hintergrundfarbe, die zum ersten Frame des GIFs passt. Sind Bilder blockiert, sehen Leser dann deine Farbe und deine Worte statt eines leeren Kastens.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td bgcolor="#2e1065" style="background-color:#2e1065;">
      <img src="https://example.com/header-october.gif"
           width="600" height="300"
           alt="The October issue: new work, three reads and a studio update"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
    </td>
  </tr>
</table>

Dark Mode und blockierte Bilder

Der Dark Mode kann die Farben um deinen Header ändern, lässt das Bild selbst aber meist in Ruhe. Ein Header mit eigener, voller Hintergrundfarbe hält in beiden Modi; einer mit transparentem oder weißem Rand kann auf einem dunklen Bildschirm als greller Kasten enden. CSS-Verläufe hinter dem Bild sind nicht in allen Programmen verlässlich, also brenn den Verlauf ins GIF ein und nutze eine Volltonfarbe als Rückfall. Farbverläufe in E-Mails zeigt die Möglichkeiten.

In Gradiently kannst du den Header in der Größe eines E-Mail-Headers auf einem bewegten Mark gestalten, die Worte stillhalten, während der Mark dahinter treibt, und ihn mit Pro als GIF exportieren. Weil der Hintergrund ein einzigartiger Mark ist, der dir gehört, sieht der Header nach deiner Marke aus statt nach einer Vorlage, die sich andere Newsletter teilen. Für statische Header und Layout siehe E-Mail-Header gestalten.