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"
Related
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.
I'm sending an HTML email with linked images, like:
<img src="https://www.test.com/image.jpg">
When I open them on my iPhone Mail app it doesn't show the images, even though I have Mail set to auto-load images. Every other email I open auto-loads images. When I open them on my Mac Mail client they do load. Is there anything special I have to do in my HTML to get the images to load? I looked at my source compared to emails that I can see the images and they appear to be doing the same thing. Any ideas?
Thanks
It turns out this occurs if you use "HTTPS" for image links. Once I changed them to HTTP the images loaded fine. Thanks
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.
Here's the thing, I want to send some text and pictures in a email, but decide what image to use AFTER I send the e-mail (Yeah, it sounds pointless and confusing, but it isn't pointless for the use I want to give it, believe me) so this was my idea:
I send the mail in html format using an embed image like this (I'm gonna use a real image I'm trying to send):
<img src="http://rodrigophp.byethost15.com/CAS/1/Tex1.png">
After the mail is sent, I go to a web I programmed, and using some php the desired image gets copied to the "/CAS/1/" directory, and renamed to "Tex1.png".
It all worked just fine about half a year ago, when I opened the recieved mail (after I set what image I wanted, to avoid browser's cache) it all worked perfectly.
But recently I tried it again, and it works If I see the mail recieved in gmail:
Gmail shows properly
But when I open it in outlook website or from my iOS devices, images won't show (and yes, I have the "download images" setting activated in iOS):
Outlook mail and iOS mail don't show the image (Tested on iPhone 5 and iPad 4 both iOS 9.2.1
I have no idea what's going on, it's like outlook web and iOS mail app can't access the URL, but it's clearly accesible for google mail web (but not if I open my gmail account in my mobile phone. The same mail, in the same account, can be seen on browser but can't be seen from Mail app.)
What's going on here? any ideas how to make it work? It worked perfectly for all of them about half a year ago!
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.