How to embed image in HTML email template?

html css email-templates xhtml-transitional
Ajay Sivan picture Ajay Sivan · Apr 6, 2017 · Viewed 13.1k times · Source

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?

Answer

Ajay Sivan picture Ajay Sivan · Apr 6, 2017

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/open?id=0B7RYx63s2PFqam9PWVFrcXc1RU

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

Now you can use this link in your template.

Related questions

Div styles not working in Outlook Emails

I have created a HTML template for Emails using Div tags. Its working fine on Gmail, Yahoo. But Div styles not working in the Outlook. Following is the code which i have used. <div style="margin:auto;padding:auto;…

Read More
border-radius alternative in email Templates

Well I am designing email templates and I know that CSS3 is not working on most of the email providers. I am trying bend the borders (that can be DONE by border-radius - but it is NOT supported by most …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More