How to embed images in an email?

We know that in html, an image is embedded with an img tag like <img src=”image.jpeg”/>. We put the image file name in the src attribute of the img tag. In email, however, there is no such concept as file. All content of an email including text and attachments is put in an octet stream. To embed an image in an email, you need a multi-part email body which is composes of at least two parts: a html part and an image part.  The html part is just like a normal html web page which uses an img tag to refer to the image. However, since there is no file concept in email, you need to refer to the image using an id instead of an image file name. For example:

In the src attribute of the img tag, we specify the id(xxxx) of the image.

The image itself is base64 encoded and put in another part of the email body like:

Here, the Content-ID header specifies the id of the image which is exactly the same as in the html part. There must be a Content-Disposition header with the value “inline”. Your email reader will look for the cid in the parts of inline Content-Disposition and embed the image into the html page if found.


Posted in tips of hosting