Estimated reading time: 2 minutes

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 (CID) It looks old, but it is still a viable option and running the present day.

The CID works by attaching a picture to the message that we are sending and, usando i tag standard dell’HTML, We add a reference to the image attached that we include in the body when the email is opened.

Wow! Fico, not? Not.

The problem with image attachments via CID is not always displayed properly by the client email. For most of this technique for computer client works, but probably will not work on webmail like Gmail, Yahoo o Hotmail.

Pro

• It is a well known technique and experimented
• It is supported by a large number of client

Cons

• It increases the size of the sent message
• You can give display problems, especially on webmail
• It may seem like an antiquated technique
• it is more complicated to implement and common results

Embedding inline (base64)

Embedding inline is much simpler. Include a picture in an email first requires that you have a version of the image encoded in base64. Once the image is encoded steps to your template and incorporate with the classic HTML tags “img”:

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

Convert the image to base64 is pretty simple. From the terminal launch this command:

base64 -w 0 immagine.jpg

Pro

• simple to implement
• fast
• you must not “comb through” he MIME

Cons

• The total size of the email can weigh much more, especially if you use more than a couple of small images
• also in this case the webmail tend to block images (or do not show correctly)

Links to external images

As can be seen from the example above, if you use a lot of images encoded in base64 the size of the email to be sent heavily grows in size, slowing sending (It can be a problem in the case of multiple mailings). The alternative is to link the images hosted on third party websites.

In this case there is nothing “super technical”. Simply linking to an external image (including links “http://”) inside the HTML body. By adopting this approach it is to consider how many people will get the message and where they are in the world.

If we are sending a message to 100 people during a week you could host your images in a public folder on DropBox, It should be more than enough.

If you will 200.000 people reached by your email within a day, it would be wiser to accommodate the image in a content delivery network like Amazon CloudFront.

Pro

• the email will be as light as possible
• little effort to include the image

Cons

• It suffers from the same problems of blocking of the other methods (webmail)
• It requires download from an external server

So which one to choose?

Unfortunately the unified support for these methods is not scheduled, then need to think what you are sending and to whom, in addition to thinking about where will read the message.

The best method is to check the email that send the world BIG, come Amazon, Pinterest, Spotify o Twitter. Observe the code, check the mail header and figure out what works for them. Then apply to all our mails and test, test, test (preferably with a webmail service like Gmail or Yahoo).