Base64 encoded image is not showing in gmail
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
Answer
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.