Tempo di lettura stimato: 2 minuti

Oggi vediamo tre tecniche per mostrare le immagini nel corpo del corpo HTML di una mail. Queste procedure non sono sempre indicate e ne consiglio l’uso solo per la composizione delle newsletter e pochi altri casi. Ma vediamo le tecniche nel dettaglio.

CID Embedded Images

A me, il Content-ID (o CID) sembra vecchio, ma è ancora una opzione valida e funzionante ai giorni nostri.

Il CID funziona allegando una immagine al messaggio che stiamo inviando e, usando i tag standard dell’HTML, aggiungeremo un riferimento all’immagine allegata che potremo includere nel corpo quando la mail viene aperta.

Wow! Fico, no? No.

Il problema con le immagini allegate tramite CID è che non sempre vengono mostrate in modo appropriato dal client mail. Per la maggior parte dei client per computer questa tecnica funziona, ma probabilmente non funzionerà sulle webmail come Gmail, Yahoo o Hotmail.

Pro

• è una tecnica molto conosciuta e sperimentata
• è supportata da un gran numero di client

Cons

• aumenta la dimensione del messaggio inviato
• può dare problemi di visualizzazione, specie sulle webmail
• può sembrare una tecnica antiquata
• è più complicato da realizzare e da risultati comuni

Incorporamento inline (base64)

L’incorporamento inline è molto più semplice. Includere una immagine in una mail per prima cosa richiede che tu abbia una versione dell’immagine codificata in base64. Una volta che l’immagine è codificata passi al tuo template e la incorpori con il più classico dei tag HTML “img”:

<img alt="immagine" src="data:image/jpeg;base64,/9j/4S/+PGltZyBhbHQ9Ik15IEltYWdlIiBzcmM9ImRhdGE6aW1h...altro codice" /> 

Convertire l’immagine in base64 è piuttosto semplice. Dal terminale lanciamo questo comando:

base64 -w 0 immagine.jpg

Pro

• semplice da realizzare
• veloce
• non devi “spulciare” il MIME

Cons

• la dimensione totale della mail può arrivare a pesare molto di più, specialmente se si usa più di un paio di immagini piccole
• anche in questo caso le webmail tendono a bloccare le immagini (o a non mostrarle correttamente)

Link a immagini esterne

Come si può notare dall’esempio qui sopra, se utilizzi molte immagini codificate in base64 la dimensione della mail da inviare cresce pesantemente di dimensioni, rallentando l’invio (può essere un problema in caso di invii multipli). L’alternativa è linkare le immagini ospitate su siti esterni.

In questo caso non c’è nulla di “super tecnico”. Semplicemente si linka una immagine esterna (link comprensivo di “http://”) all’interno del corpo HTML. Adottando questo approccio c’è da considerare quante persone riceveranno il messaggio e dove siano nel mondo.

Se stiamo mandando un messaggio a 100 persone nel corso di una settimana potresti ospitare le tue immagini in una cartella pubblica di DropBox, dovrebbe essere più che sufficiente.

Se invece saranno 200.000 le persone raggiunte dalla tua mail nell’arco di un giorno, sarebbe più saggio ospitare l’immagine in un Content Delivery Network come CloudFront di Amazon.

Pro

• l’email sarà il più leggero possibile
• sforzo minimo per includere l’immagine

Cons

• soffre degli stessi problemi di blocco degli altri metodi (webmail)
• richiede il download da server esterni

Quindi quale scegliere?

Purtroppo il supporto unificato per questi metodi non è in programma, quindi serve pensare cosa stai mandando e a chi, oltre a pensare a dove leggeranno il messaggio.

Il metodo migliore è controllare le mail che mandano i BIG mondiali, come Amazon, Pinterest, Spotify o Twitter. Osservare il codice, controllare gli header delle mail e capire cosa funzioni per loro. Poi applicare tutto alle nostre mail e testare, testare, testare (meglio se con un servizio di webmail come Gmail o Yahoo).