Perchè ottimizzare le immagini?

Nell’Email Marketing, convertire i prospect in clienti dipende in buona parte dalla creazione di una buona impressione sul lettore. In questa fase, la performance della tua email gioca un ruolo fondamentale.

Immagini di qualità e tempi di caricamento ultra veloci offrono ai lettori una impressione psicologica positiva che incoraggia le vendite e la loro lealtà verso l’azienda. In questo senso, la user experience, in termini di prestazioni che consentono reazioni veloci, diventa un fattore fondamentale che impatta sui tassi di conversione delle campagne di Email Marketing.

Una newsletter di successo si basa quindi sul promuovere i giusti prodotti o servizi nel giusto momento, aspetto che non solo è reso possibile dal tempismo strategico, ma anche da una performance che consenta tempi di caricamento ultra veloci. D’altra parte, in un mondo con una dipendenza crescente da smartphone e dispositivi mobile, i rivenditori devono comprendere la necessità di essere efficienti anche su schermi mobile. I lettori mobile non vanno ignorati, anzi, sono spesso la maggioranza di tutta la audience.

Cosa succede se non si considerano questi fattori?

E’ molto probabile che i lettori abbandonino la lettura della newsletter, frustati dalla lentezza nel caricare immagini o altro e, considerata l’alta concorrenza nelle inbox, rivolgano l’attenzione a un’altra email.

Media Queries e Layout Fluidi consentono di fornire efficacemente il messaggio a tutti gli utenti, a prescindere dalle dimensioni dello schermo in uso. Certo questo non garantisce che l’email venga caricata velocemente: le immagini infatti devono ancora essere caricate sul dispositivo, anzichè esser scelte in base alla banda disponibile. Come ottimizzare quindi le immagini per risolvere il problema?

Dentro al codice

Grazie al responsive design, possiamo visualizzare differenti immagini per differenti circostanze utilizzando il tag <picture>, pratica però, non disponibile, nel design email, scandalosamente ancorato al table design con stili in linea. Tuttavia, nell’Email Design, possiamo applicare la tecnica delle immagini flessibili definendo una regola CSS generale che garantisca che la larghezza delle immagini non superi mai quella del contenitore principale.

img {
 max-width: 100%;
 height: auto;
}

Ma ancora, non è abbastanza! Dobbiamo evitare che gli utenti di smartphone e tablet, si annoino durante il download delle immagini al punto da chiudere o eliminare la newsletter. Un trucco ben conosciuto nel web design, consente di di caricare le immagini utilizzando il regolare tag <img> con un css di questo tipo:

td{
 background: url(myimage.jpg);
 }

Supponiamo quindi di avere questa situazione:

<td>
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

L’immagine verrà presuminilmente scaricata velocemente su un dispositivo desktop, ma potrebbe rallentarsi su uno smarphone. Per evitare questo, una possibile soluzione è quella di precaricare una versione ridotta della stessa immagine nello sfondo del contenitore, utilizzando la proprietà css background. L’immagine ridotta si caricherà molto velocemente in attesa della definitiva:

<td style="background:url('small_awesome_banner.jpg') center center no-repeat;">
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

E per essere sicuri che l’immagine a bassa risoluzione sia visualizzata solo dai dispositivi mobile, usiamo css media queries:

/*SMARTPHONE STYLES*/
@media only screen and (max-width: 480px) {
#imageHolder{
background:url('small_awesome_banner.jpg') center center no-repeat;
}
}

<td id="imageHolder">
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

Possiamo inoltre utilizzare URI come background-image nelle proprietà css. Si tratta di un altro metodo molto utile per ridurre le richieste HTTP in quanto l’immagine è codificata da una lunga stringa con tempi di caricamento molto veloci, esenti da scaricamenti dai server.

Prova ad ispezionare il codice dell’immagine che segue, osservando l’attributo src:

E’ interessante notare che ogni immagine incorporata in questo modo eluderà il blocco delle immagini in Mozilla Thunderbird. URI va comunque usato con cautela, in quanto bloccato da alcuni client di posta elettronica come il diffusissimo Gmail che potrebbe convertire il codice funzionante con un tag src vuoto:

<img src="" alt="my image" width="100%" />

Ad ogni modo, caricando le risorse URI nello sfondo del contenitore genitore con la sintassi indicata precedentemente, non si avranno problemi nemmeno nei client come Gmail che rifiutano l’istruzione. La nostra immagine ‘awesome_banner.jpg’ verrà scaricata normalmente.

Questi trucchi sono molto utili anche quando per la propria newsletter, si ha a che fare con immagini animate in formato GIF. Possiamo precaricare una versione ridotta dell’immagine in formato jpg (la prassi è scegliere il primo fotogramma) che sarà caricato in attesa dell’animazione, così da evitare contenitori vuoti prima del caricamento.

Questo è un esempio di come funziona. Come prima cosa dobbiamo caricare un'immagine con codifica base 64 nello sfondo della cella che contiene la gif animata. Si caricherà molto velocemente. In questo modo anche gli utenti con poca banda disponibile, visualizzeranno un contenuto.

Nel prossimo esempio pre carichiamo una versione ridotta dell'immagine gif utilizzando il css. La versione ridotta dell'immagine è una jpg con una dimensione di 19,05KB che si scaricherà in 4 secondi con una banda di 56.6KB. L'animazione finale invece ha un peso di 626,4 KB e si scaricherà in 114 secondi con lo stesso modem.

Il “taglia e cuci” è una pratica sempre utile

Ultima, ma non meno importante, è l’antica pratica del “Taglia e Cuci”, ancora utile nella progettazione html per email. Ecco come funziona: per evitare che il caricamento dei media sia tutto sulle spalle di un’unica immagine, possiamo tagliare questa immagine in sezioni più piccole con l’aiuto di Photoshop o strumenti analoghi. Ovviamente dovremmo rimontare l’intera immagine nella nostra email dove le sezioni si caricheranno in modo progressivo, riducendo il tempo di attesa e la frustrazione del lettore.

Sebbene l’ottimizzazione dell’Email Design sia una pratica resa difficile dalla carenza di strumenti, questi trucchi risolvono efficacemente un problema comune: è ben noto che i lettori esigono contenuti rapidi, pena la ricerca su altri siti o email. Servendo le immagini più velocemente miglioreremo la soddisfazione dei clienti e il loro mantenimento, riducendo tassi di disiscrizioni dovuti a cause facilmente evitabili.