Gmail блокирует небольшие встроенные встроенные изображения в шаблоне электронной почты

Я отправляю электронные письма своим членам, и похоже, что Gmail блокирует изображения, которые я размещаю в письме. Они встроены в базовую кодировку в теге img. Я просмотрел несколько потоков в Интернете о том, что Gmail не отправляет изображения, но не нашел ничего, что помогает. Вот некоторые из вещей, которые я пробовал до сих пор. 1. включить внешние изображения в Gmail (с помощью значка настроек) 2. уменьшил размер изображений до 8000 байт (Outlook.com не отправил изображения ~ 15000 байт)

Я получаю изображения просто отлично, если я отправляю на адрес электронной почты outlook.com, но в Gmail src тега img пуст, и в письме не отображаются изображения. Я использую https://putsmail.com для проверки/отправки своих писем, поэтому я знаю, что проблема не проблема с SendGrid (моя служба отправки электронной почты) или мое приложение.

Вот один из моих шаблонов ниже. Я использую шаблон электронной почты от litmuss. Все ниже в основном по умолчанию, за исключением дополнительной информации, которую я добавил, как изображения и дополнительный текст в теле письма.

Вот jsfiddle с полным шаблоном с данными изображения, которые могут быть скопированы прямо в putsmail и отправлены на тестирование! Любая помощь или информация о том, почему Gmail не отправляет изображения, будет отличным!

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <style type="text/css"> /* FONTS */ @@media screen { @@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff'); } @@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff'); } @@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'); } @@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); } } /* CLIENT-SPECIFIC STYLES */ body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } /* RESET STYLES */ img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* iOS BLUE LINKS */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* MOBILE STYLES */ @@media screen and (max-width:600px) { h1 { font-size: 32px !important; line-height: 32px !important; } } /* ANDROID CENTER FIX */ div[style*="margin: 16px 0;"] { margin: 0 !important; } </style> </head> <body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">  <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled you created a YogaBandy event! Get ready for members to register. </div> <table border="0" cellpadding="0" cellspacing="0" width="100%">  <tr> <td bgcolor="#16749F" align="center">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;"> <tr> <td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> <a href="#" onclick="location.href='https://YogaBandy.com'; return false;" target="_blank"> <img alt="Logo" src="http://litmuswww.s3.amazonaws.com/community/template-gallery/ceej/logo.png" width="40" height="40" style="display: block; width: 40px; max-width: 40px; min-width: 40px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0"> </a> </td> </tr> </table>  </td> </tr>  <tr> <td bgcolor="#16749F" align="center" style="padding: 0px 10px 0px 10px;">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;"> <tr> <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;"> <h2 style="font-size: 48px; font-weight: 400; margin: 0;">Event Created</h2> </td> </tr> </table>  </td> </tr>  <tr> <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">We're excited you have created an event. Here are some of the details below.</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;"> <a href="#" onclick="location.href='https://www.YogaBandy.com/Space/Public/@Model.SpaceId'; return false;" target="_blank" class="thumbnail" style="margin-bottom: 0px;"> <img alt="SpaceImage" title="Space Image" style="display: block" width="225" height="126" src="data:image/jpg;base64,@Raw(Model.SpaceThumbnail)" /> <div class="caption"> @Model.SpaceName </div> </a> </p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;"> <a href="#" onclick="location.href='https://www.YogaBandy.com/Profile/Public/@Model.HostId'; return false;" target="_blank" class="thumbnail" style="margin-bottom: 0px;"> <img alt="HostImage" title="Host Image" style="display: block" width="225" height="225" src="data:image/jpg;base64,@Raw(Model.HostThumbnail)" /> <div class="caption"> @Model.HostName </div> </a> </p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">@Model.Date.ToLongDateString()</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;"> <div>Time: @Model.Date.ToShortTimeString()</div> </p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">@Model.Location</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">@Model.Duration</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">@Model.Style</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="border-radius: 3px;" bgcolor="#16749F"><a href="" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #16749F; display: inline-block;">Add To Calendar</a></td> </tr> </table> </td> </tr> </table> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">If you have any questions, just send an email to the support address—we're always happy to help out.</p> </td> </tr>  <tr> <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <p style="margin: 0;">Cheers,<br>The YogaBandy Team</p> </td> </tr> </table>  </td> </tr>  <tr> <td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">  <tr> <td bgcolor="#157b9d" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"> <h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?</h2> <p style="margin: 0;"><a href="#" onclick="location.href='https://YogaBandy/Contact.com'; return false;" target="_blank" style="color: #FFFFFF;">We’re here, ready to help</a></p> </td> </tr> </table>  </td> </tr>  <tr> <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">   <tr> <td bgcolor="#f4f4f4" align="left" style="padding: 0px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;"> <p style="margin: 0;">You received this email because you just created a YogaBandy event. If it looks weird, <a href="#" onclick="location.href='https://YogaBandy.com'; return false;" target="_blank" style="color: #111111; font-weight: 700;">view it in your browser</a>.</p> </td> </tr>   </table>  </td> </tr> </table> </body> </html>

Ответы

Ответ 1

Google отказывается показывать изображения с URL-адресом данных в веб-интерфейсе Gmail. Это известная проблема (в Google см. Меру безопасности) в течение длительного времени подвергается высокой критике.

Хорошей новостью является то, что у вас есть другой вариант, кроме использования внешних изображений.

Использование встроенного вложения с Content ID работает с Gmail.

После добавления ваших изображений в виде встроенных вложений вам нужно указать URL-адреса CID вместо URL-адреса данных в теге html.

Существует множество современных библиотек, которые позволят вам легко отправлять электронные письма с встроенными вложениями. Но я написал образец script в VBScript с библиотекой CDO, готовый к использованию, если у вас установлен ящик Windows 2000+.

Подготовьте тестовую среду.

Поместите файлы в каталог, как показано на скриншоте ниже.

tpl.html - это файл шаблона, который вы указали. Вам нужно будет внести некоторые изменения в этот файл.

Замените оба элемента img следующим образом. Обратите внимание, что URL-адреса данных пропали. image1 и image2 - это идентификаторы содержимого, указанные для каждого встроенного вложения в script. Ничего не связано с именами файлов.

<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 = "[email protected]"
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

Дважды щелкните и дождитесь инструкций.

См. также https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+inline+image

Ответ 2

TL;DR

Gmail и некоторые другие клиенты не любят base64 закодированные изображения.

Полная история

Самое первое, что я сделал, это просмотр "Показать оригинал" в Gmail. К моему удивлению, исходный контент по-прежнему содержит ваши данные встроенного изображения:

Это сразу говорит мне, что gmail просто хочет отфильтровать этот контент. Я не смог найти причину. В некоторых догадках указывается длина самих кодированных данных. Другие говорят об общем способе, в котором Gmail фильтрует изображения. Есть даже записи этого метода функционирующего несколько лет назад.

Кроме того, при просмотре одного и того же электронного письма в стороннем клиенте, таком как Newton (ранее Cloud Magic), я вижу изображения, которые отображаются правильно.

Все это указывает на простой, однако печальный факт, что gmail не любит встроенные кодированные изображения. Не в браузере, а не в мобильных приложениях.

Фактически, в самом конце я обнаружил сообщение из 2013 в блоге Campaign Monitor, который заканчивается теми же результатами.

Не используйте встроенные встроенные изображения.