Gmail blocking small embedded inline images in email template
I'm sending emails to my members and it looks like Gmail is blocking the images I place in the email. These are embedded as a base 64 encoded string in an img tag. I've looked at multiple threads online about Gmail not sending images but haven't found anything that helps. Here are some of the things I've tried so far. 1. enabled external images in Gmail (through the settings icon) 2. reduced the size of the images to under 8000 bytes (Outlook.com wouldn't send images ~ 15000 bytes)
I receive the images just fine if I send to an outlook.com email address, but in Gmail the src of the img tag is empty, and no images show up in the email. I'm using https://putsmail.com to test/send my emails, so I know the issue isn't a problem with SendGrid (my email sending service) or my application.
Here is one of my templates below. I'm using an email template from litmuss. Everything below is basically default except the extra info I've added like the images and some extra text in the email body.
Here is a jsfiddle with a complete template with image data that can be copied right into putsmail and be sent to test! Any help or info as to why Gmail doesn't send the images would be great!
Answer
Google refuses to show images with data url in Gmail's web interface. It's a known problem (in Google's view a security measure) for a long time highly criticized.
The good news is that you have another option except for using external images.
Using an inline attachment with a Content-ID works with Gmail.
After adding your images as inline attachments you'll need to point CID URLs instead of Data URLs in the html body.
There are plenty of modern libraries that will allow you to send emails with inline attachments easily. But I wrote a sample script in VBScript with CDO library, ready to use if you have a box Windows 2000+ installed.
Let's prepare the test environment.
Put the files in a directory as in the screenshot below.
tpl.html is the template file you gave. You'll need to make some changes in this file.
Replace both img elements with the following respectively. Note that data urls gone. image1 and image2 are the Content IDs specified for each inline attachments in the script. Nothing associated with file names here.
<img src="cid:image1" alt="SpaceImage" title="Space Image" style="display: block" width="225" height="126" />
<img src="cid:image2" alt="HostImage" title="Host Image" style="display: block" width="225" height="225" />
Embedded.vbs:
MsgBox "Wait while your email is being sent.", vbOKOnly Or vbInformation
'************ CONFIGURATION *************
Const smtpUsername = "..."
Const smtpPassword = "..."
Const smtpHost = "smtp.sendgrid.net"
Const smtpPort = 587
Const senderEmail = "...@..."
Const recipientEmail = "[email protected]"
'************ CONFIGURATION *************
Const cdoRefTypeId = 0
Set Fso = CreateObject("Scripting.FileSystemObject")
Set objMail = CreateObject("CDO.Message")
With objMail.Configuration
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername") = smtpUsername
.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword") = smtpPassword
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver") = smtpHost
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = smtpPort
.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 20 'secs
.Fields.Update
End With
With objMail
.AutoGenerateTextBody = False
.From = senderEmail
.To = recipientEmail
.Subject = "Inline Image Test"
.BodyPart.ContentTransferEncoding = "quoted-printable"
.BodyPart.Charset = "utf-8"
' Adding images as inline attachments with Content IDs which is used with image sources. e.g. <img src="cid:image1" .. >
.AddRelatedBodyPart Fso.GetAbsolutePathName("image1.jpg"), "image1", cdoRefTypeId
.AddRelatedBodyPart Fso.GetAbsolutePathName("image2.jpg"), "image2", cdoRefTypeId
'append html body from file
.HTMLBody = Fso.OpenTextFile("tpl.html").ReadAll
.Send
End With
MsgBox "Email successfully sent! Check your inbox.", vbOKOnly Or vbInformation
Double click and wait for instructions.
See also https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+inline+image