Embedding Image in HTML Email

How-to's for image embedding

Using base64 with data URIs

Using absolute URLs seems easy-peasy, but some situations call for embedding images directly into the email to avoid dependencies. This is achieved using base64 encoded data URIs. Here's how:

<img src="data:image/jpeg;base64,iVBOR..." alt="Is this magic? No, it's Base64!">


You could transform your images to base64 using websites like motobit.com. However, this can bulk up your email's size quite a bit - consider it the email equivalent of holiday weight gain.

Structuring multipart emails

Complex emails might require a more structured approach using multipart/mixed, with multipart/alternative nested inside it. This is like giving the recipient a choice at a buffet - plain text or HTML? For image embedding specifically, use multipart/related type and assign the images Content-ID (cid) within the HTML:

<img src="cid:imageContentId" alt="CID, not Sci-Fi">


Every image should include specific attributes in the email's raw code:

• Content-Type: Matches the image type (e.g., image/jpeg)
• Content-Transfer-Encoding: Usually safe to keep as base64.
• Content-ID: Your ticket to reference the image in HTML.
• Content-Disposition: Set this as inline - like inline skating, but less fun.

Catering to all email clients

Remember, all mail clients aren't created equal. Some might block images - think of it as their sunglasses. In these cases, stick to hosting your image somewhere and use an absolute URL. For small email lists, hosting on public Dropbox links or similar servers might work.

More embedding gems

Responsiveness is key

Keep various screen sizes in mind. Using CSS to control the responsiveness of images can be helpful. However, make sure you are aware of email clients' CSS support.

Blocked images begone!

If your images are being blocked by the email client, you can trick the system. Websites like stylecampaign.com have tools to convert images into HTML. Essentially creating an illusion so real, it can fool most blockers.

Mind the size

Keep a close eye on your image sizes. Too large can slow down the email loading, or even cause display issues. Image size is the Goldilocks of emails - it needs to be just right.