Tutorial Cum se încorporează corect imagini GIF în e-mailuri

tutorial

În acest articol

După cele mai bune practici, iată instrucțiunile pentru inserarea unui GIF animat în e-mailul dvs., în siguranță și optimizat pentru mobil.

Ați observat cum e-mailurile animate și cu mișcare sunt din ce în ce mai răspândite în căsuța de e-mail? Noi facem. Ca profesionist în marketing prin e-mail sau designer, este posibil să fi încercat să le utilizați pentru a crește conversiile prin e-mail. Dar am observat, de asemenea, că marketerii nu încorporează întotdeauna GIF-uri animate în mesaje folosind cele mai bune practici de proiectare.

Interesant este că GIF-urile animate sunt de fapt foarte ușor de utilizat în e-mail: pot fi utilizate ca orice alt fișier imagine și sunt perfect compatibile cu majoritatea clienților de e-mail. Problema cu multe GIF-uri din e-mailuri este că apelurile la acțiune din mesaje sunt adesea în GIF, ca în acest e-mail de la Ann Taylor:

Îndemnul „GO” nu este de fapt un buton: este o parte a imaginii. Orice clic, deasupra, dedesubt sau în jurul „butonului” va avea același efect: vă va duce la o pagină de destinație pe site-ul Ann Taylor, deoarece link-ul se extinde la întregul GIF animat. Acest lucru face foarte ușor pentru cititori să primească mai multe informații (și eventual să efectueze o achiziție) prin simpla atingere sau clic aproape oriunde. Dar acest lucru poate fi și problematic. Dacă GIF-ul animat nu este redat corect dintr-un motiv sau altul, mesajul își pierde toate funcțiile. Acest lucru se poate întâmpla dacă ...

  • Există distorsiuni ale dimensiunii imaginii pe dispozitivul cititor mobil
  • Afișarea imaginilor nu este activată pe clientul unde este citit e-mailul.
  • Un program de blocare a anunțurilor blochează GIF-ul.
  • GIF este un fișier mare și cititorul nu așteaptă să se termine încărcarea

De asemenea, utilizatorii Outlook vor vedea cel mai probabil doar o imagine statică, deoarece animația nu va funcționa. Din aceste motive și altele, Vă recomandăm întotdeauna să adoptați o abordare a designului de e-mail care optimizează HTML și nu se bazează doar pe imagini. Doriți să știți cum să utilizați minunatele GIF-uri animate în e-mail, în timp ce vă asigurați că îndemnurile dvs. apar întotdeauna? Continua să citești.

Atelierul de azi

Astăzi vom recrea următorul mesaj din Banana Republic și vă vom arăta cum să optimizați utilizarea GIF-urilor animate într-un e-mail pentru a ne asigura că conținutul dvs. apare.

Iată rezumatul nostru într-un tutorial video:

Și pentru referință, iată mesajul complet din Banana Republic:

În e-mailul Republicii Banane, mesajul cheie, care include îndemnul la acțiune, se află într-un singur bloc de imagine, ca în e-mailul Ann Taylor văzut mai sus. Majoritatea mesajului - toată partea neagră - este un GIF animat:

Aceasta înseamnă că, dacă afișarea imaginii este dezactivată sau GIF se blochează sau nu se încarcă, întregul mesaj se pierde.

Să remediem asta.

Pasul 1: Izolați GIF-ul animat

GIF-ul animat din această postare este minunat. Deci, chiar dacă apare în căsuța de e-mail, este posibil să nu se încarce sau să nu se încarce complet, astfel încât mesajul ajunge să fie necitit. Pentru a evita aceste probleme, o bună practică este decuparea animației GIF, decupând părțile imaginii care nu necesită animație. În mesajul Republicii Banane, asta înseamnă că vrem să izolăm partea centrală a imaginii, partea care se mișcă - în caseta roz de mai jos - și să recreăm restul cu text și HTML.

Pentru a decupa imaginea rapid, folosim ezGIF.com. Și aici avem noul nostru GIF animat: