Gmail not displaying base64 image data in HTML emails

Other Questions Gmail
1

Issue with embedded base64 images in Gmail

I’m having trouble getting base64 encoded images to display properly in Gmail when viewed through a web browser. The strange thing is that the same email shows the image perfectly when I open it in desktop email apps like Outlook or Apple Mail.

I’ve double checked my email headers and they seem to be configured properly. Has anyone else run into this problem before?

Sample HTML code:

<html>
  <body>
    Hello there!
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAQABEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==" width="200" height="150" alt="test image">
  </body>
</html>

Email headers I’m using:

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

Any suggestions on how to fix this would be really helpful!

2

Gmail blocks base64 encoded images by default due to security reasons aimed at preventing exploits and reducing email size. I experienced a similar issue while developing a newsletter system a while back. The approach that worked for me was to avoid embedding images directly. Instead, I uploaded images to a web server, such as Amazon S3, and then used standard HTTP URLs in my img tags. This way, images display properly in Gmail once users click ‘Display images’ or add the sender to their contacts. The desktop versions of clients like Outlook tend to handle base64 images more leniently, which explains the difference in behavior.

3

Had this exact same problem with our company newsletters. Gmail keeps getting stricter with base64 images - it’s honestly getting ridiculous. Gmail’s web interface blocks data URIs almost every time, but here’s what sometimes works: switch your Content-Transfer-Encoding to 8bit instead of quoted-printable, and use multipart/related if you’re doing CID references. But honestly? Just host your images externally. I switched to a CDN and never went back. Load times are faster and you get delivery tracking too.

4

Gmail’s super inconsistent with this. They completely strip base64 images in the web client, but the mobile app sometimes shows them - makes no sense. Best fix is hosting images externally like mentioned above. If you really need embedded images, try cid: attachments instead of data: URLs.

5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.