Cookie

Today we see three techniques to show the images in the HTML body of the body of an email. These procedures are not always indicated, and I recommend its use only for the composition of the newsletter and a few other cases. But we see the techniques in detail.

CID Embedded Images

A me, he 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, not? Not.

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="picture" 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 devispulciareil 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 disuper 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).

Not enough?


TheJoe

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.