Base64 encoded image is not showing in gmail

Asked 17/10, 2017 at 6:13 Answered 30/5 at 2:16

I have an embedded HTML email in which I'm using a base64 encoded image. Image doesn't show in gmail when accessing via chrome. But it works fine when accessing same mail via mail client(Mail application on Mac). I have set headers correctly. Any idea?

My code

<html>
    <body>Hi
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAREAAAALCAYAAABYrrnHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABANpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjVEMjA4OTI0OTNCRkRCMTE5MTRBODU5MEQzMTUwOEM4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVGMjU1MzZBQUVGQjExRTc5NUQyQTc1MzA0RERGMTVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVGMjU1MzY5QUVGQjExRTc5NUQyQTc1MzA0RERGMTVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIElsbHVzdHJhdG9yIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0idXVpZDpiNDQ5NzVjYy00YmI1LTRmNzAtODRiZi0zMGU2NjFkYmY3ZDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZDc1MTVmZDQtMjkzZS00ZWI5LWFiMjQtOTMzYzRkZjNmOTY4Ii8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+bXRrYV9hY3RpdmF0aW9uX2NhcmQ8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr6AOtYAAABESURBVHja7NZBDQAwCARB2tS/m6qoKIoGvswkGNjHhQgAAACAeVbdkwHoOnVXBqD9iWSmCkDblgAwIoARAYwIMNAXYACy9wSMWMVdzAAAAABJRU5ErkJggg==" width="273" height="11" alt="">
    </body>
</html>

Headers

Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Genarogendarme answered 17/10, 2017 at 6:13 Comment(4)

Gmail does not support base64 embedded images. Yet it allows attached images to be shown. – Summary 17/10, 2017 at 6:16

https://mcmap.net/q/176516/-base64-images-to-gmail – Distribute 17/10, 2017 at 6:16

@Summary Then how does it show correctly in mail client? – Genarogendarme 17/10, 2017 at 6:18

If you using nodemailer, check the solution here – Talanian 26/7, 2021 at 15:9

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. Apple Mail is one of the few clients that does support them, that's why you're able to see them there but not elsewhere.

Another thing to be mindful of with base64 encoded images is email file size. 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.

Korella answered 17/10, 2017 at 11:52 Comment(6)

I'm not sure this answer is still accurate. I've observed that embedded images don't render in GMail but they do in Outlook. – Zoosperm 16/4, 2023 at 21:23

Aye, they have some support, but not much. Unfortunately this answer is still mostly accurate. caniemail.com/features/html-svg – Korella 17/4, 2023 at 12:23

That document itself may be inaccurate. Based on recent testing with the native Windows Outlook client, embedded images appear to render correctly. – Zoosperm 17/4, 2023 at 14:0

Oh interesting! Which version of Windows Outlook do you see embedded SVG displayed in? – Korella 17/4, 2023 at 15:52

Version 2303 build 16.0.16227.20202. Not embedded SVG though - embedded PNG. – Zoosperm 17/4, 2023 at 17:21

This should not be the accepted answer anymore. – Rother 14/8, 2023 at 8:45

It looks like that direct encoded images (non-bease64 ) are also not supported by gmail :( - I write below snippet to convert image from base64 to direct form and send it in email - but still not see any image :( . To solve this issue you need to add images as attachements with cid and use that cid in img tags <img src="cid:123456"> - more details here

function convert() {
  let base64 = imageBase64.value.split('base64,')[1];
  let hex = [...atob(base64)].map(c => c.charCodeAt(0).toString(16).padStart(2, 0));
  let img = 'data:image/png,%' + hex.join('%');

  pic.src = img;
  msg.innerText = img;
}

Put your img base64 data uri here<br>
<input style="width:200px" id='imageBase64' value="data:image/bmp;base64,Qk0aAwAAAAAAABsAAAAMAAAAEAAQAAEAGAAAAAAACFpyAAAAAAAACB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAKoH8AAAACFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCFpyCFpyKoH8KoH8KoH8AAAACB/NCB/NCFpyCB/NCB/NKoH8CB/NCB/NKoH8CB/NCFpyCFpyKoH8KoH8CFpyCFpyCFpyCFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NAAAAAAAACFpyAAAACFpyCFpyCFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NAAAAAAAACFpyAAAAAAAACFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NCFpyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8KoH8KoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyKoH8KoH8KoH8KoH8CFpyCFpyCFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyKoH8CFpyCFpyKoH8KoH8KoH8CFpyKoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAACFpyKoH8CFpyKoH8KoH8KoH8CFpyKoH8KoH8CFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyKoH8KoH8CFpyKoH8AAAACFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NKoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NAAAAAAAAKoH8KoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8">
<button onclick="convert()">Convert</button><br> Result
<br>
<textarea id='msg' rows="4" cols="50"></textarea><br>
<img id='pic'>

Defenestration answered 18/11, 2019 at 14:53 Comment(0)

If you are using Java, The JavaMailSender already has a helper method.

In your template, have the image tag like the one below.

<img src="cid:header-logo">

And then, in your email logic, add the attachments as inline.

helper.addInline("header-logo", new ClassPathResource("mail/images/header-logo.png"));

Rother answered 14/8, 2023 at 8:44 Comment(0)

I had similar issue and used alternative way. Used cid as it was mentioned earlier. I am using aspnet to send html email with embedded base64 so here is an example in C#.

MailMessage message = new MailMessage();

        message.From = new MailAddress(emailTemplate.From);
        message.To.Add(to);
        message.Subject = emailTemplate.SubjectEn;

        string htmlBody = emailTemplate.ContentEn;

        AlternateView htmlView = 
 AlternateView.CreateAlternateViewFromString(htmlBody, null, 
 MediaTypeNames.Text.Html);
 string base64Image = "";
 ContentType contentType = new ContentType("image/png");
 LinkedResource linkedImage = new LinkedResource(new 
 System.IO.MemoryStream(imageBytes), contentType)
        {
            ContentId = "0123456789"
        };

        htmlView.LinkedResources.Add(linkedImage);
        message.AlternateViews.Add(htmlView);

Systematize answered 26/9, 2023 at 8:59 Comment(0)

You need this approach found using nodemailer :

attachDataUrls – if true then convert data: images in the HTML content of this message to embedded attachments

link:

https://nodemailer.com/message/#content-options

Gurney answered 9/2 at 14:16 Comment(0)

if you want to display image in the gmail api then you have to remember some important points

gmail api gives you base64url string so you have to convert that string into a base64 and then add that image inside the tag like this

<img src="data:image/png;base64" /}

you can use this function to convert to base 64

let base64 = base64URlSTRING.replace(/-/g, '+').replace(/_/g, '/');
while (base64.length % 4) base64 += '=';

this will resolve your problem

Steinman answered 30/5 at 2:16 Comment(0)

Recommended topics

Hot tags