Waarom GIFs in e-mail gebruiken
Geanimeerde GIFs zijn de enige betrouwbare manier om beweging aan e-mail toe te voegen. In tegenstelling tot video, dat inconsistente ondersteuning heeft bij e-mailclients, werken GIF-animaties in vrijwel elke grote e-mailclient, behalve Outlook desktop (dat het eerste frame als statisch beeld toont).
De voordelen zijn aanzienlijk:
- Tot 26% hogere doorklikratio vergeleken met statische afbeeldingen
- Opvallend: beweging trekt van nature de aandacht in een statische inbox
- Automatisch afspelen: geen gebruikersinteractie nodig, in tegenstelling tot ingesloten video
- Productdemo's: functies in actie tonen zonder dat je hoeft te klikken
- Afteltimers: urgentie creëren voor uitverkoop en lanceringen
Groottevereisten voor e-mail GIFs
De ideale e-mail GIF is kleiner dan 500 KB. Dit is waarom:
- Grote afbeeldingen vertragen het laden van e-mail — abonnees op mobiel wachten misschien niet
- Sommige e-mailclients knippen e-mails af boven bepaalde groottedrempels
- Gmail knipt e-mails af die groter zijn dan 102 KB aan HTML, maar afbeeldingen laden afzonderlijk
- Meerdere grote GIFs in één e-mail vergroten het laadprobleem
| E-mailclient | GIF-animatie | Opmerkingen |
|---|---|---|
| Gmail | Volledige ondersteuning | Web, iOS, Android |
| Apple Mail | Volledige ondersteuning | macOS en iOS |
| Yahoo Mail | Volledige ondersteuning | Web en mobiel |
| Outlook.com (web) | Volledige ondersteuning | Alleen webversie |
| Outlook desktop | Alleen eerste frame | 2007, 2010, 2013, 2016, 2019, 365 |
| Samsung Email | Volledige ondersteuning | Standaard Android-client |
Het Outlook Eerste-Frame-Probleem
Outlook desktop-versies (2007 tot en met Microsoft 365) gebruiken de Word-rendering-engine voor HTML-e-mail, die GIF-animatie niet ondersteunt. Deze clients tonen alleen het eerste frame als statisch beeld.
Omdat Outlook ongeveer 30% van de zakelijke e-mailmarkt in handen heeft, moet je je GIF zo ontwerpen dat hij ook zonder animatie werkt:
- Zet je kernboodschap in frame 1: de call-to-action, productafbeelding of kop moet zichtbaar zijn zonder animatie
- Ontwerp frame 1 als op zichzelf staand beeld: het moet logisch zijn, zelfs als er nooit andere frames worden getoond
- Voeg vroeg tekstoverlays toe: als je GIF tekst bevat, toon die dan in het eerste frame
- Test in Litmus of Email on Acid: bekijk de weergave in alle clients voor je verzendt
Optimale GIF-instellingen voor e-mail
| Instelling | Aanbeveling | Waarom |
|---|---|---|
| Breedte | 320–480px | E-mailkolommen zijn ~600px breed |
| FPS | 8–10 | E-mailcontext is vergevingsgezind |
| Duur | 2–6 seconden | Snel bericht, geen film |
| Kleuren | 64–128 | Minder kleuren = kleinere bestanden |
| Dithering | Bayer of Sierra2 | Bayer voor de kleinste bestandsgrootte |
| Lus | 2–3 keer of oneindig | Trekt aandacht zonder te irriteren |
Best Practices voor e-mail GIFs
- Maximaal 1–2 GIFs per e-mail: meer dan dat vertraagt het laden en overweldigt de abonnee
- Voeg altijd alt-tekst toe: beschrijft de afbeelding voor toegankelijkheid en wanneer afbeeldingen geblokkeerd zijn
- Vermijd snel flikkeren: meer dan 3 flitsen per seconde kan fotosensitieve aandoeningen veroorzaken
- Plaats boven de vouw: de GIF moet zichtbaar zijn zonder te scrollen
- Vertrouw niet op animatie voor cruciale informatie: de boodschap moet ook als statisch beeld werken
Beste toepassingen voor e-mail GIFs
- Productpresentatie: doorloop producthoeken of functies
- Uitverkoopaftelling: geanimeerde timer creëert urgentie
- Voor/na-demo's: schakel tussen twee toestanden
- Geanimeerde CTA-knop: subtiele puls of kleurverandering trekt klikken
- Tutorial-fragmenten: toon een snelle handleiding in 3–5 frames
E-mail preset: 400px breed, 8 fps, 64 kleuren, bayer dithering, 4 seconden duur, 3 keer lus. Dit streeft naar minder dan 500 KB voor snel laden bij alle clients.