Codul de e-mail 102: lucrul cu imagini

Publicat: 2020-05-01

Dacă vezi codul răspândit în fața ta, te poți simți incredibil de intimidant și uneori frustrant. Vă promit, de la marketer la marketer, că este mult mai ușor decât pare. În plus, posibilitatea de a naviga prin HTML prin e-mail este o abilitate incredibil de valoroasă. În seria noastră de noțiuni de bază despre codul de e-mail, vă vom învăța noțiunile fundamentale ale HTML pentru e-mail pe care trebuie să le cunoașteți pentru a vă simți mai confortabil cu codul de e-mail.

În ultima noastră postare, am explicat cum puteți naviga prin codul de e-mail pentru a fi la curent cu cum să actualizați linkurile sau să faceți modificări rapide în copiere. Dar ce zici de imagini?

Imaginile sunt coloana vertebrală a multor e-mailuri de înaltă performanță. Dar, cu o complexitate din ce în ce mai mare și cu diferite tipuri de fișiere, dimensiuni, accesibilitate și timp de încărcare de luat în considerare, poate copleși chiar și pe cel mai priceput marketer.

În acest articol, vom aborda unele dintre cele mai comune modalități de a adăuga imagini la e-mailul dvs. și vom trece peste elementele de bază pentru a ne asigura că abonații dvs. au o experiență grozavă. Dacă sunteți în căutarea unei scufundări profunde asupra imaginilor, consultați aceste ghiduri:

  • Ghid definitiv pentru imagini de fundal în e-mail
  • Un ghid pentru GIF-urile animate în e-mail
  • Utilizarea imaginilor în e-mail HTML

Puteți urmări cu ușurință subiectele abordate în acest ghid, așa că mergeți mai departe și deschideți un e-mail în Litmus Builder și vom începe!

Pregătește-ți imaginea

Înainte de a vă putea adăuga imaginea la e-mail, asigurați-vă că este configurată pentru succes. În primul rând, asigurați-vă că imaginea pe care o utilizați are un tip de fișier și o dimensiune bună pentru e-mail . Dimensiunile mari ale fișierelor vă vor încetini timpul de încărcare, scăzând conversiile și implicarea dvs. generale, așa că asigurați-vă că utilizați o imagine ușoară care se încarcă rapid.

Introduceți imaginea dvs

Găsiți unde doriți să adăugați imaginea în codul dvs. - dacă utilizați Litmus Builder, răsturnați pe Vizualizare grilă pentru a face clic acolo unde doriți să apară o imagine, apoi faceți clic în vizualizarea codului. Când ați găsit locul perfect, utilizați eticheta <img> pentru a adăuga imaginea dvs., dar înlocuiți adresa URL aici cu un link direct către imaginea dvs.

Dacă nu sunteți sigur ce este o legătură directă, căutați sfârșitul numelui fișierului, acesta ar trebui să se termine cu un tip de fișier imagine precum „.png”, „.jpg” sau „.gif”. Linkurile către foldere sau HTML nu vor funcționa aici, trebuie să indice direct imaginea pe care o adăugați la e-mail.

 <img src="img-url.jpg" />

Asta e! După ce ați adăugat eticheta, imaginea va apărea în panoul de previzualizare dacă sunteți în Litmus Builder.

Sunteți curios unde vă puteți găzdui imaginile? Majoritatea ESP-urilor au un sistem de găzduire a fișierelor în care vă puteți încărca imaginile și puteți utiliza acele adrese URL publice pentru sursa imaginii din e-mailul dvs., așa că asigurați-vă că verificați mai întâi ESP. Dacă ESP-ul dvs. nu oferă găzduire de fișiere de imagine, luați în considerare utilizarea AWS Amazon sau serverul FTP al propriului site web pentru găzduirea imaginilor.

Găsiți dimensiunile potrivite

Cel mai bine este să utilizați o imagine de două ori mai mare decât spațiul în care doriți să introduceți imaginea, astfel încât să arate grozav pe toate monitoare și să nu existe pixelii sau neclarități. Ajustați lățimea și înălțimea imaginilor dvs. adăugând un modificator la eticheta <img> pe care ați creat-o la pasul anterior. Va arata cam asa:

 <img src="img-url.jpg" width="400" height="100" />

Ajustați valorile lățimii și înălțimii în funcție de ceea ce are sens pentru e-mailul dvs. Puteți juca cu aceste valori și vedeți cum arată făcând modificări, apoi făcând clic în panoul de previzualizare din Builder pentru a le vedea actualizate.

Adăugați text ALT

Textul ALT descrie o imagine, astfel încât cei care au imaginile dezactivate în clientul lor de e-mail sau se bazează pe un cititor de ecran să vă poată citi cu ușurință e-mailul. De exemplu, dacă avem o imagine a unei promoții care oferă o reducere de 20%, adăugarea unui text ALT care descrie oferta îl face pe cititorul să cunoască oferta, chiar dacă nu poate vedea imagini din orice motiv.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Cel mai bun text ALT este descriptiv, succint și are aceeași intenție ca și imaginea dvs. Dacă treceți e-mailul prin Lista de verificare Litmus înainte de a trimite, vom semnala textul ALT lipsă, astfel încât să puteți accesa cu ușurință și să îl actualizați. Acum nici nu mai trebuie să verificați cu un dezvoltator!

Schimbați imaginile

Te-ai răzgândit cu privire la acea singură imagine? Aveți două opțiuni:

1. La fel ca și crearea unei noi imagini, puteți înlocui adresa URL care indică imaginea dvs. cu una nouă. Acest lucru vă va păstra toate dimensiunile, textul dvs. ALT sau orice altceva ar putea ajuta la stilarea imaginii dvs. și doar să actualizați conținutul imaginii în sine.

Luați eticheta actuală a imaginii și căutați calea fișierului:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Înlocuiți calea cu noua cale de imagine:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. În funcție de locul unde este găzduită imaginea dvs., puteți încărca și o nouă imagine cu exact același nume în aceeași locație. În acest fel, nu trebuie să atingeți deloc codul pentru a actualiza imaginea e-mailului.

E-mail perfect pentru imagine

Acum că ai puterea de a actualiza și modifica imagini, folosește-o cu înțelepciune! Imaginile din e-mail pot merge prost rapid. Fișierele grele care durează mult timp să se încarce, folosind imagini pentru întregul e-mail sau renunțarea la accesibilitatea pentru design pot crea experiențe dezordonate pentru abonați.

Iată câteva dintre cele mai bune practici rapide de reținut atunci când vă construiți biblioteca de imagini:

  • Păstrați fișierele ușoare și dulci , sub 1 MB este cel mai bine și cu cât mai mici, cu atât mai bine (Litmus Checklist verifică timpul de încărcare, așa că nu vă îngrijorați dacă nu cunoașteți fiecare dimensiune a imaginii.)
  • Adăugați text alternativ pentru a vă face e-mailul lizibil și accesibil chiar dacă imaginile nu sunt vizibile.
  • Nu trimite e-mailuri doar cu imagini și asigură-te că e-mailul tău are text live. Poate fi tentant să proiectați un întreg e-mail folosind o imagine, dar asta poate afecta angajamentul și conversiile cu timpi lungi de încărcare și experiențe slabe pentru cei care au imaginile dezactivate.

Aveți nevoie de ajutor pentru o anumită întrebare despre codul pentru începători? Spune-ne ce ai vrea să vezi în continuare în această serie. Nicio întrebare nu este prea simplă!

_________________________________

Aflați mai multe despre imaginile din e-mail:

  • De ce nu ar trebui să trimiteți e-mailuri doar cu imagini
  • Un ghid pentru GIF-urile animate în e-mail  
  • Înțelegerea imaginilor Retina în e-mailul HTML
  • PNG, GIF sau JPEG? Care este cel mai bun format de imagine pentru e-mail?  
  • GIF-uri animate în e-mail: 10 sfaturi pentru a menține dimensiunile fișierelor mici  
  • Ghidul suprem pentru imaginile de fundal în e-mail
  • PNG-uri animate în e-mail: o alternativă la GIF-uri?