# Animierte E-Mail-Header: GIFs, die schnell laden und gut aussehen [Canonical HTML page](https://gradiently.design/de/guide/animated-email-header) Bewegung oben in einer E-Mail fällt auf, aber Postfächer sind wählerisch. Ein guter animierter Header ist leicht, kurz und ergibt auch dann vollständig Sinn, wenn er sich nie bewegt. ## The short version - Ein animierter E-Mail-Header ist fast immer ein GIF, denn die meisten E-Mail-Programme zeigen animierte GIFs an und nur sehr wenige spielen Video ab. - Manche Desktop-Versionen von Outlook für Windows zeigen nur den ersten Frame eines GIFs, deshalb muss der erste Frame als vollständiges Design funktionieren. - Eine gängige Header-Größe ist 1200×600 Pixel, angezeigt mit 600 Pixeln Breite, damit er auf Bildschirmen mit hoher Pixeldichte scharf bleibt. - Ein leichtes GIF ist wichtig, weil große Bilder über mobile Daten langsam laden, und kurze Loops mit wenig Bewegung wiegen am wenigsten. - Wichtige Worte wie Angebote, Daten und Buttons gehören als echter HTML-Text unter den Header, nicht nur in die Animation. 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](https://gradiently.design/de/guide/gif-vs-mp4). | Einstellung | Empfehlung | Warum | | --- | --- | --- | | Format | GIF | Läuft in den meisten E-Mail-Programmen; Video meist nicht | | Designgröße | 1200×600 px | Doppelte Anzeigebreite für scharfe, dichte Bildschirme | | Anzeigebreite | 600 px | Die Standardbreite eines E-Mail-Körpers | | Loop-Länge | 2 bis 5 Sekunden | Kurze Loops wiegen weniger und wirken trotzdem lebendig | | Bildrate | 10 bis 15 fps | Flüssig genug für treibende Farbe und einfache Einblendungen | | Dateigewicht | So leicht wie möglich | Große Header laden über mobile Daten langsam | Ausgangswerte für einen Header, der schnell lädt und scharf aussieht. Ist dir das Gewicht wichtiger als die Schärfe, exportiere das GIF mit 600 px Breite. ## 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. Newsletter-Header mit der Zeile Die Oktober-Ausgabe und einem kleinen Label Feldnotizen über einem Farbverlauf Frame eins: vollständig. Jedes Wort steht an seinem Platz, wer nur diesen Frame sieht, verpasst also nichts. Derselbe Newsletter-Header später im Loop, mit verschobener Verlaufsfarbe hinter stillstehenden Worten Mitten im Loop: Die Worte bleiben stehen, während sich die Farbe dahinter verschiebt. Die Bewegung bringt Stimmung, keine Information. - **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](https://gradiently.design/de/guide/seamless-loop-video) 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. **In 1200×600 gestalten** Leg den Header so an, dass alle Worte im ersten Frame an ihrem Platz stehen. 2. **Den Loop kurz halten** Zwei bis fünf Sekunden, wobei jede Bewegung einen ganzen Zyklus durchläuft. 3. **Als GIF mit 10 bis 15 fps exportieren** Nutze eine Palette, die aus der Animation selbst gebaut ist, keine generische. 4. **Das Gewicht prüfen** Ist es schwer, probier 600 px Breite, weniger Frames oder weniger Bewegung, bevor du die Qualität senkst. 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](https://gradiently.design/de/guide/gif-maker-tips). ## 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. ```html
The October issue: new work, three reads and a studio update
``` Ein GIF mit 1200×600, angezeigt in 600×300. Die Zellfarbe passt zum ersten Frame, und der gestaltete Alt-Text liest sich gut, wenn Bilder aus sind. > **Echter Text unter dem Header** Setz Angebot, Datum und Button als echten HTML-Text unter das Bild. Er erscheint auch bei ausgeschalteten Bildern, ist für Screenreader und die Suche im Postfach lesbar und bleibt in jeder Größe scharf. ## 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](https://gradiently.design/de/guide/gradients-in-email) zeigt die Möglichkeiten. ### Vermeiden - Worte, die erst nach dem ersten Frame erscheinen - Ein schweres GIF, in dem sich das ganze Bild bewegt - Transparente Ränder, die im Dark Mode stören - Leerer oder generischer Alt-Text wie „Header“ - Angebot und Button nur im Bild ### So geht es - Ein erster Frame, der ein vollständiges Design ist - Stillstehende Worte über langsam bewegter Farbe - Eine volle Hintergrundfarbe im Bild - Alt-Text, der sagt, was der Header sagt - Echter HTML-Text für alles, worauf Leser reagieren sollen 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](https://gradiently.design/de/guide/email-header-design). ## FAQ ### Funktionieren animierte GIFs in E-Mails? In den meisten E-Mail-Programmen ja. Manche Desktop-Versionen von Outlook für Windows zeigen nur den ersten Frame, gestalte diesen also so, dass er allein funktioniert. ### Welche Größe sollte ein animierter E-Mail-Header haben? Gestalte ihn in 1200×600 Pixeln und zeig ihn mit 600 Pixeln Breite an. Ist dir das Dateigewicht wichtiger als Schärfe auf dichten Bildschirmen, exportiere das GIF stattdessen in 600×300. ### Kann ich Video in einem E-Mail-Header verwenden? Video läuft in sehr wenigen E-Mail-Programmen und ist daher keine verlässliche Wahl. Nutze ein animiertes GIF oder ein Standbild, das zum Video verlinkt. ### Warum animiert sich mein E-Mail-GIF in Outlook nicht? Manche Outlook-Versionen für Windows zeigen von animierten GIFs nur den ersten Frame. Das ist eine Grenze des Programms, nicht deiner Datei, und deshalb sollte der erste Frame die ganze Botschaft tragen. ### Wie mache ich ein E-Mail-GIF kleiner? Kürze den Loop, senke die Bildrate auf etwa 10 bis 15 fps, halte den Großteil des Bildes still und erwäge einen Export mit 600 px Breite.