# Geanimeerde e-mailheaders: gifs die snel laden en mooi ogen [Canonical HTML page](https://gradiently.design/nl/guide/animated-email-header) Beweging bovenaan een e-mail valt op, maar inboxen zijn lastig. Een goede geanimeerde header is licht, kort en klopt nog helemaal als hij nooit beweegt. ## The short version - Een geanimeerde e-mailheader is bijna altijd een gif, omdat de meeste e-mailprogramma’s geanimeerde gifs tonen en heel weinig video afspelen. - Sommige desktopversies van Outlook voor Windows tonen alleen het eerste beeld van een gif, dus het eerste beeld moet als compleet ontwerp werken. - Een gangbaar headerformaat is 1200×600 pixels, getoond op 600 pixels breed zodat het scherp blijft op schermen met hoge dichtheid. - De gif licht houden telt omdat grote afbeeldingen traag laden op mobiele data, en korte loops met weinig beweging wegen het minst. - Belangrijke woorden zoals aanbiedingen, data en knoppen horen in echte html-tekst onder de header, niet alleen in de animatie. Een **geanimeerde e-mailheader** is het best een gif van ongeveer 1200×600 pixels, getoond op 600 breed, met een korte loop, een bescheiden bestandsgewicht en een eerste beeld dat als af ontwerp op zichzelf werkt. Die laatste regel vergeten mensen: sommige desktopversies van Outlook voor Windows tonen alleen het eerste beeld van een geanimeerde gif, en wie afbeeldingen geblokkeerd heeft, ziet niets dan je alt-tekst. Ontwerp eerst voor die lezers en voeg beweging toe als bonus voor alle anderen. ## Waarom geanimeerde e-mailheaders gifs zijn Ondersteuning voor video in e-mail is zeldzaam en onbetrouwbaar. Een geanimeerde gif, een afbeeldingsformaat, wordt in de meeste programma’s getoond, van Apple Mail tot Gmail. Nieuwere formaten zoals geanimeerde WebP worden in inboxen wisselvalliger ondersteund. Gif blijft dus de praktische keuze, met alle beperkingen: maximaal 256 kleuren per beeld en grotere bestanden dan video. Die beperkingen bepalen het ontwerp. De volledige vergelijking staat in [gif versus mp4](https://gradiently.design/nl/guide/gif-vs-mp4). | Instelling | Aanbeveling | Waarom | | --- | --- | --- | | Formaat | Gif | Speelt af in de meeste e-mailprogramma’s; video meestal niet | | Ontwerpformaat | 1200×600 px | Twee keer de weergavebreedte voor scherpe, dichte schermen | | Weergavebreedte | 600 px | De standaardbreedte van een e-mailtekst | | Looplengte | 2 tot 5 seconden | Korte loops wegen minder en voelen toch levend | | Framerate | 10 tot 15 fps | Vloeiend genoeg voor driftende kleur en eenvoudige onthullingen | | Bestandsgewicht | Zo licht als je kunt | Grote headers laden traag op mobiele data | Beginpunten voor een header die snel laadt en scherp oogt. Als gewicht belangrijker is dan scherpte, exporteer de gif dan op 600 px breed. ## Ontwerp het eerste beeld als terugvaloptie Behandel het eerste beeld als de e-mailheader en de animatie als extra. Als je woorden vanuit het niets binnenvegen, ziet een Outlook-lezer een leeg kleurblok. Als je product op seconde twee verschijnt, ziet die lezer het product nooit. Zet alles wat telt in het eerste beeld in beeld en laat de beweging eromheen gebeuren. Nieuwsbriefheader met de tekst de oktoberuitgave en een klein label veldnotities over een kleurverloop Beeld één: compleet. Elk woord staat op zijn plek, dus een lezer die alleen dit beeld ziet, mist niets. Dezelfde nieuwsbriefheader later in de loop, met het kleurverloop verschoven achter stilstaande woorden Halverwege de loop: de woorden blijven staan terwijl de kleur erachter verschuift. De beweging voegt sfeer toe, geen informatie. - **Woorden stil, achtergrond in beweging.** Driftende kleur achter een vaste kop is de betrouwbaarste geanimeerde header die er is. - **Eén kleine beweging.** Een woord dat verandert, een regel die zichzelf onderstreept, een zachte lichtverschuiving. Eén idee per header. - **Eindig waar je begon.** Een loop die terugspringt naar het begin ziet er kapot uit. Laat het laatste beeld overlopen in het eerste, zoals in [naadloze loopvideo](https://gradiently.design/nl/guide/seamless-loop-video). - **Geen geflits.** Houd helderheidsveranderingen traag. Snel geflits is onprettig en kan schadelijk zijn. ## De gif licht houden Het grootste deel van het gewicht van een gif komt van pixels die tussen beelden veranderen. Een header waarvan het hele beeld beweegt is zwaar; een header waarbij een traag kleurverloop achter stilstaande woorden drijft is veel lichter, omdat de encoder alleen kan opslaan wat veranderde. De breedte halveren maakt van het aantal pixels ongeveer een kwart, dus bepaal vroeg of deze header 1200 px moet zijn of dat 600 px volstaat. 1. **Ontwerp op 1200×600** Zet de header op met alle woorden op hun plek in het eerste beeld. 2. **Houd de loop kort** Twee tot vijf seconden, waarbij elke beweging een hele cyclus voltooit. 3. **Exporteer als gif op 10 tot 15 fps** Gebruik een palet dat uit de animatie zelf is opgebouwd, geen algemeen palet. 4. **Controleer het gewicht** Is hij zwaar, probeer dan 600 px breed, minder beelden of minder beweging voordat je de kwaliteit verlaagt. 5. **Controleer beeld één afzonderlijk** Open de gif in een beeldviewer die alleen het eerste beeld toont, of stuur een test naar Outlook op Windows. De gedetailleerde exportopdrachten, palet- en ditherinstellingen staan in [geanimeerde gifs](https://gradiently.design/nl/guide/gif-maker-tips). ## Html voor een geanimeerde e-mailheader Codeer de header als gewone afbeelding in een tabelcel. Stel de weergavebreedte in zowel in het attribuut als in de stijl in, zodat elk e-mailprogramma hem juist schaalt, geef hem beschrijvende alt-tekst en zet op de cel een achtergrondkleur die past bij het eerste beeld van de gif. Als afbeeldingen geblokkeerd zijn, zien lezers dan je kleur en je woorden, geen lege doos. ```html
The October issue: new work, three reads and a studio update
``` Een gif van 1200×600 getoond op 600×300. De celkleur past bij het eerste beeld, en de vormgegeven alt-tekst leest goed als afbeeldingen uit staan. > **Echte tekst onder de header** Zet het aanbod, de datum en de knop als echte html-tekst onder de afbeelding. Het verschijnt ook als afbeeldingen uit staan, kan door schermlezers en zoeken in de inbox worden gelezen en blijft op elk formaat scherp. ## Donkere modus en geblokkeerde afbeeldingen De donkere modus kan de kleuren rond je header veranderen maar laat de afbeelding zelf meestal met rust. Een header met een eigen volledige achtergrondkleur houdt het in beide modi vol; eentje met een transparante of witte rand kan op een donker scherm een felle doos worden. Css-kleurverlopen achter de afbeelding zijn niet betrouwbaar in alle e-mailprogramma’s, dus bak het kleurverloop in de gif en gebruik een effen kleur als terugval. [Kleurverlopen in e-mail](https://gradiently.design/nl/guide/gradients-in-email) behandelt de opties. ### Vermijd - Woorden die pas na het eerste beeld verschijnen - Een zware gif waarbij het hele beeld beweegt - Transparante randen die botsen in de donkere modus - Lege of algemene alt-tekst zoals “header” - Aanbod en knop alleen in de afbeelding ### Doe - Een eerste beeld dat een compleet ontwerp is - Stilstaande woorden over langzaam bewegende kleur - Een volledige achtergrondkleur in de afbeelding - Alt-tekst die zegt wat de header zegt - Echte html-tekst voor alles waarop mensen reageren In Gradiently ontwerp je de header op het formaat van een e-mailheader op een bewegende Mark, houd je de woorden stil terwijl de Mark erachter drijft en exporteer je hem met Pro als gif. Omdat de achtergrond een unieke Mark is die jij bezit, lijkt de header op jouw merk en niet op een sjabloon dat andere nieuwsbrieven delen. Voor stilstaande headers en opmaak, zie [e-mailheaders ontwerpen](https://gradiently.design/nl/guide/email-header-design). ## FAQ ### Werken geanimeerde gifs in e-mail? In de meeste e-mailprogramma’s wel. Sommige desktopversies van Outlook voor Windows tonen alleen het eerste beeld, dus ontwerp dat beeld zo dat het op zichzelf werkt. ### Welk formaat moet een geanimeerde e-mailheader hebben? Ontwerp hem op 1200×600 pixels en toon hem op 600 pixels breed. Is bestandsgewicht belangrijker dan scherpte op schermen met hoge dichtheid, exporteer de gif dan op 600×300. ### Kan ik video gebruiken in een e-mailheader? Video speelt af in heel weinig e-mailprogramma’s, dus het is geen betrouwbare keuze. Gebruik een geanimeerde gif, of een stilstaande afbeelding die naar de video linkt. ### Waarom animeert mijn e-mailgif niet in Outlook? Sommige Outlook-versies voor Windows tonen alleen het eerste beeld van geanimeerde gifs. Dat is een beperking van het programma, niet van je bestand, en daarom moet het eerste beeld de hele boodschap dragen. ### Hoe maak ik een e-mailgif kleiner? Verkort de loop, verlaag de framerate naar ongeveer 10 tot 15 fps, houd het grootste deel van het beeld stil en overweeg te exporteren op 600 px breed.