CODEWITHSUNDEEP
htmlcssemail-templatesxhtml-transitional
Ajay Sivan
Ajay Sivan

Reputation: 2989

How to embed image in HTML email template?

I have created an Email template using HTML and inline style from scratch. Now I need to add some images, at this point it's not possible to use url because it is not hosted. I tried using base64 encoding, it worked in Apple mail client, but the images are not rendering in Gmail. Is there any way to embed image in html supported by all email clients?

Upvotes: 3

Views: 29652

Answers (2)

Ajay Sivan
Ajay Sivan

Reputation: 2989

Host the Image publicly in Google Drive by sharing the link 'public on the Web' or 'anyone with the link'. Then use this link http://drive.google.com/uc?export=view&id=FILE_ID to get direct access to the image. You should replace the FILE_ID with actual id from Google Drive link.

Example :

Google Drive Link : https://drive.google.com/file/d/17iWczcf1T_D4kGRaQYBh6J2XOQI181u6/view?usp=sharing

Generated Link : http://drive.google.com/uc?export=view&id=17iWczcf1T_D4kGRaQYBh6J2XOQI181u6

Now you can use this link in your template.

Upvotes: 7

Mihály Sáróy
Mihály Sáróy

Reputation: 51

Base64 has very limited support. Generally speaking it is not advised to use it. You can find information about base64 encoding support in this tutorial. It may help to decide if the supported client list is enough or not in your case.

Embedding images in the email is possible by sending them along with the email and reference the sent images with the img tag. A good starter reading for this method is Campaignmonitor’s “Embedding images revisited“ blog post.

The best solution is to host the images with a service provider, which is fast and maintained. If you use Github, you can also serve images (or any other content) from the GH-Pages branch of a repository.

Upvotes: 2

Related Questions