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:

Answer 1

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;
}

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.