I'm trying to send an email with an embedded image using generated HTML in the backend,
and I see that every email client is behaving differently.
Outlook only supports base64 format, and Gmail doesn't.
Gmail supports a regular image src, and also a background image, while Outlook doesn't.
I'm wondering if there is a generic solution for this issue
Thanks.
Not really. Different email clients support different things at different levels. You can have a look at caniemail.com for support details across popular email clients. For example:
background-image
base64 image format
A regular <img src> pointing to an hosted image usually works well, though.
Related
Some email clients don't support web fonts, and all the proposed solutions I've seen for this are to force a backup font like Arial that's supported by the client. My problem is that I need the default web font font to show up because it is a barcode font.
Any workarounds to this?
You must create an image to ensure the barcode remains the same across all email environments.
You should insert it from a hosted location that is publicly accessible, rather than using Base-64 or CID methods (not fully supported across email environments - see https://www.caniemail.com/features/image-base64/)
e.g.:
<img src="https://webserver.com/image/barcode-34234234234234.png" width="200" alt="Barcode with number 13425245452" />
I am currently working on send emails with image files included; they need to display as PNGs. My plan is to host the images on a server and then link them in the email. However, I am unsure of if I should send the emails as the PNGs themselves or if I should encode them to base64 before I send them. What is the best practice?
Thanks!
Best practice is to reference external PNG, JPG, and JPG files.
base64 encoded images are not well supported in email. They aren't supported in most web email clients (including Gmail) and are completely blocked in Outlook. Even for the small clients that do support embedded images, file size can quickly become a problem. Gmail App (iOS, Android) and Outlook (iOS) truncate email messages whose file size exceeds 102KB. Remotely referenced images (Eg. <img src="http://www.website.com/image.png"> do not count towards the email's file size, but base64 encoded images do and can quickly blow out an email's file size past the 102KB limit. Just something else to consider.
Most html emails feature images hosted on an external web site. This gets around the problem with some email clients that will not download an attachment until directed by you.
In the case of Email Service Providers (ESP) like Mailchimp or Salesforce Marketing Cloud (Exact Target), they host many of the images when you use their services. You could just as easily host them elsewhere.
Good luck.
I have used Mozilla Thunderbird for a long time, and created a well-polished HTML signature that works perfectly with Thunderbird.
How is it possible to use the same signature inside of Apple Mail? As far as I know, it does not support HTML signatures (which, perhaps, is a valid security policy, but works against the needs of our team).
If there is no way to inject the HTML code, what would be the better way to approach this issue?
This varies depending on which Apple Mail/OS X version you're using.
The simplest thing to try would be to open your signature html file in Safari (Chrome and Firefox behave differently and would result in images being attached), copy it from there and paste it in the signature field in Mail > Preferences > Signatures.
The images in my html email fail to load completely. The email was written in dreamweaver. I've tested the email on various clients: hotmail, gmail, outlook on mac and windows. The images load fine on the others, just not completely on hotmail/outlook.com. I've also hosted the images on tinypic to eradicate the possible hosting issues.
Is there any other codes I'm missing? Is it possibly the size of the images?
http://i58.tinypic.com/255kmjn.png
Did you perhaps forget the end quote?
You show:
src="http://i58.tinypic.com/255kmjn.png;
it should be
src="http://i58.tinypic.com/255kmjn.png"
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.
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.
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.