How to successfully embed images in HTML for display in webmail clients?

Question

I'm trying to do a signature in HTML using images that are encoded in base 64 data URLs. Here's an example:

<img src="data:image/png;base64,iVBORw0KGgoAAAAN...kJggg==">

It's working nice with mail software as Mail on Mac or Thunderbird but it's not working with webmail such as gmail, outlook, roundcube , hotmail ...

Have you any idea how to make it work ? I really want to put those images directly in the source code, it's more practical.

Catechin

Since i used base 64 images, here's the code (a bit long): pastebin.com/atqBMzi9 I also erased all the informations such as links, names ect because this is private. EDIT: i'm using a transparent image and i modify the background image with css style. – Paganini

This might be more appropriate for webapps.stackexchange.com This isn't a programming question, you simply want to use raw HTML in a webmail signature. For Gmail is it not necessary as a WYSIWYG editor is provided for signatures. – Hemoglobin

Ok but how could i make it become something that's works on every receivers webmail ? – Paganini

Receiver? That's a different question complete. – Hemoglobin

Well the thing is i'm doing this signature for a compagny. They're using Mail on MAC so it's working right now for them, but they send mails to a lot of people and they don't know wich mail service do all the customers use. So i would like this signature being compatible for all mail services :) – Paganini

Related question: #8580855 – Hemoglobin

Answer 1

simple answer?

You can't. Gmail, outlook etc will ignore base64 images.

Look at this site to learn more about this

So based on our results, it is clearly not worth using embedded images in your emails. All you will be doing is forcing people to download encoded images that they will not be able to view.

Synopsize

Oh crap :( I'll try doing it another way. I'll just put the source url and then upload my images on my server. – Paganini

Is this still the case? – Slur

Is this still the case? – Cioffi

Answer 2

I’m using embedded SVG, here is why:

• It looks nice (vector graphics work well for logos).
• No attachment (even images mailed as so called hidden email attachments are visible as such in many email clients).
• No additional http request (works offline, once downloaded).
• No “Do you want to load the images..” question.
• It’s ok for me, if it doesn’t display in Gmail and Outlook. It’s kind of graceful degradation.

But if you really want to display images in Gmail and Outlook, you will need to load these via HTTP.

The guy from CSS-tricks has a nice guide on SVG in email: https://css-tricks.com/a-guide-on-svg-support-in-email/

The final solution is the following:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

But I personally don’t like it, because I don’t want a client to ask the user if he wants to load additional resources.

Abernathy