Animated .gif: hoe zet je dit in?

Vermelding Emerce Top 100
Beste e-mailbedrijven 2017

Animated .gif: hoe zet je dit in?

Animated .gifs zijn niet meer weg te denken uit ons – veelal online georiënteerde – bestaan. We zien ze overal. In blogs, op social media en in chats met onze vrienden. Maar ook in e-mails worden animated .gifs steeds vaker toegepast. Onze aandacht wordt altijd naar bewegend beeld getrokken. En omdat de support voor video in de meeste e-mailclients nog niet optimaal is, bieden animated .gifs daarin een mooi alternatief. De ideeën en meningen over het gebruik van animated .gifs lopen enorm uiteen. Dus hoe kunnen we ze nou het beste inzetten? Lees in dit blog een aantal ideeën.


Als directe communicatie

Google reageerde in 2015 al eens op een vraag van een journalist over hun toetreding tot de streaming videogames markt met een animated .gif, die eigenlijk alles zei. Deze reactie was nogal opvallend, en opende de deur voor een vorm van corporate communicatie waar eerder nog weinig op ingezet werd.

Soms zegt een goede animatie dus alles. Ook als reactie op een vraag of opmerking, er is altijd een .gif die past bij wat je wil zeggen, of wil laten zien.

animated .gif


Trek de aandacht naar de belangrijkste info

Als je lezers een lange e-mail ontvangen met daarin een grote hoeveelheid informatie, scannen ze de mail over het algemeen eerst en missen daarbij vaak de belangrijkste informatie. Door gebruik te maken van animated .gifs, kun je de aandacht naar bepaalde informatie toe trekken, of een concept meer kracht bij zetten.


Support animated .gif en support video in e-mail

De ondersteuning voor animated .gif in e-mail is ten opzichte van de ondersteuning voor video echt vele malen beter. In het schema hieronder is te zien welke e-mailclients video in e-mail-, en welke animated .gif ondersteunen. Het verschil is enorm. Te zien is dat met uitzondering van Outlook 2007 – 2013 alle gangbare e-mailclients animated .gif supporten, waar dat bij video beperkt blijft tot slechts 4 e-mailclients.

Ondersteuning .gif vs video in e-mail


Animated .gif als alternatief voor video

De meeste e-mailclients bieden dus nog geen ondersteuning voor het gebruik van video in e-mails. Zoals je in het schema hierboven kan zien, worden video's op het moment van schrijven alleen correct weergegeven in Apple Mail, Thunderbird, de standaard mail app in iOS10 en de mail app op de Samsung Galaxy.

De beperkte ondersteuning maakt het al lastig, maar video heeft ook de nare eigenschap een nogal forse bestandsgrootte te hebben. Als je lezer een matige internetverbinding heeft waardoor het laden van de e-mail lang duurt, haakt men mogelijk al af vóórdat de e-mail bekeken is. Als je lezer toevallig geen verbinding met een Wi-Fi netwerk heeft, help je ze zo ook snel over zijn of haar datalimiet heen. Genoeg redenen om rekening te houden met de grootte van je bestanden dus. Een goede leidraad is een maximale bestandsgrootte van 500kb.

Om deze problemen te vermijden, kunnen we .gifs gebruiken als alternatief voor video. We kunnen via .gifs kleine previews van een video geven, en deze doorlinken naar de volledige versie. Zoals we bijvoorbeeld in onze laatste nieuwsbrief hebben gedaan, om de video van onze AVG/GDPR kennissessie onder de aandacht te brengen.

AVG GDPR kennissessie

Als je zelf een animated .gif wil maken, of gebruik wil maken van een pre-made .gif, kijk dan bijvoorbeeld eens in de Giphy collectie voor inspiratie!


Welke stappen zijn belangrijk?

Kies je startframe: Over het algemeen worden animated .gifs erg goed ondersteund. Ze doen het goed in alle webmail clients, maar ook in de meeste desktop en mobile e-mailclients. De grootste uitzondering daarop is Microsoft Outlook 2007-2013. In deze versies van Outlook wordt alleen het startframe getoond, niet de gehele animatie.

Zorg er dus voor dat je je startframe zorgvuldig kiest. Als je de .gif continu laat loopen, kun je hem op elk willekeurig punt laten starten. Maar als er bijvoorbeeld een volledig wit frame in de animatie zit, moet je dus een startframe kiezen die direct laat zien wat je met je .gif wil vertellen.

Met bijvoorbeeld Photoshop en Giphy kun je een animated .gif maken, en de volgorde van je frames aanpassen. Kom je er niet uit? Photoshop en Giphy kunnen je op weg helpen.

Photoshop & Giphy


Let op de bestandsgrootte: animated .gifs bestaan uit veel verschillende frames, dus net als bij video, kunnen ook deze bestanden vrij snel in grootte oplopen. Om de bestandsgrootte van je .gif te minimaliseren, kun je bijvoorbeeld werken met een tool als ImageOptim. Deze tool zorgt ervoor dat je lezers de mail en de .gif sneller kunnen downloaden. En jij dus je .gif optimaal kan inzetten!

Doseer de inzet van animated .gifs: Te veel .gifs in één mail, kan als een kermisattractie worden ervaren. Dat is waarschijnlijk niet wat je wil. Maak dus een goede overweging wanneer je een animated .gif wil gebruiken en hoe je deze inzet. De .gif moet het doel dat je voor ogen hebt ondersteunen en niet laten ondersneeuwen.


Maak je eigen animated .gif

  • 1. Importeer de video
    Open Photoshop

    Ga naar File > Import > Video Frames to Layers

    Selecteer de video, klik Open

    Klik op OK om de video om te zetten naar frames voor animated .gif

    Let op:
    een video die te lang is kan mogelijk niet geheel worden geïmporteerd en omgezet worden. Je kunt bij opties het aantal frames beperken. Je kan de video in zijn geheel importeren, of een deel van de video kiezen. Een andere mogelijkheid is om het aantal frames die geïmporteerd worden onder te verdelen in stappen, bijvoorbeeld van elke 2 frames er maar 1 importeren.
  • .gif creëren in Photoshop stap 1
  • 2. Ga naar Window > Timeline en open het Timeline paneel.
    Klik op de button in het midden van het paneel and selecteer Create Frame Animation. Klik daarna op de button om een nieuwe frame animatie te creëren.
  • .gif creëren in Photoshop stap 2
  • 3. Converteer de layers naar animatie frames
    Klik op het menu icoontje in de rechterbovenhoek van het Timeline paneel.
    Klik op Make Frames From Layers.
    Dit zal alle layers in het Layers paneel omzetten in frames voor je animatie.
    Klik op de Play button aan de onderkant van je Timeline (of druk op de spatiebalk) om de animatie te previewen.
  • .gif creëren in Photoshop stap 3
  • 4. Zet de animatie op loopen
    Klik op het repeat menu aan de onderkant van het Timeline paneel en selecteer Forever. Dit zorgt ervoor dat je animatie blijft loopen.
  • .gif creëren in Photoshop stap 4

  • 5. Exporteer de animatie als een .gif
    Ga naar File > Export > Save for Web (Legacy)

    1. Selecteer GIF 128 Dithered van het Preset menu.
    2. Selecteer 256 van het Colors menu.
    3. Als je de GIF online wil gebruiken, of de bestandsgrootte van de animatie wil beperken, kan je de Width en Height aanpassen bij je Size opties.
    4. Selecteer Forever in het Looping Options menu.
  • .gif creëren in Photoshop stap 5

Klik op de Preview… button linksonder in het Export scherm om je GIF in een webbrowser te previewen.
Klik op Save… en selecteer waar je de animated .gif wil opslaan.

Done, je animated .gif is een feit.


Dus, geef je e-mails een boost!

Animated .gifs zijn geweldig en kunnen een enorme toevoeging zijn voor je e-mails, maar gebruik ze gedoseerd. Eén, of misschien twee .gifs kunnen erg goed werken en als goed alternatief voor video dienen. Maar maak wel telkens de juiste overwegingen. Ze moeten het doel dat je voor ogen hebt ondersteunen, de bestandsgrootte moet binnen de perken blijven en je moet nadenken over welk startframe je wil gebruiken, zodat je e-mail (en .gif) er in elke situatie goed uitziet. Als je deze stappen altijd volgt, kun je je e-mails boosten met geweldige animaties!

animated .gif

Welke afbeeldingen gebruik jij voor je mailing? Lees meer over de mogelijkheden in ons blog. Heb jij ook nog leuke tips of ken jij handige tools? Laat het ons dan weten! Join de LinkedIn-groep E-mailmarketing Nederland en deel je kennis met verschillende vakgenoten.




Ja, natuurlijk wil ik dit artikel delen:




Reageer op dit artikel


Best bekeken blogs


Vraag aan e-Village?

Wist je dat...

Wist je dat...

...e-Village een deliverability ratio (afleverpercentage) heeft van 99,72%?

Meer weetjes? Schrijf je in voor de nieuwsbrief en blijf altijd op de hoogte