html - simple - Gmail bloquea pequeñas imágenes en línea incrustadas en la plantilla de correo electrónico

plantilla html para gmail (2)

Google se niega a mostrar imágenes con url de datos en la interfaz web de Gmail. Es un problema conocido (en opinión de Google una medida de seguridad) durante mucho tiempo muy criticado.

La buena noticia es que tiene otra opción, excepto el uso de imágenes externas.

El uso de un archivo adjunto en línea con Content-ID funciona con Gmail.

Después de agregar sus imágenes como archivos adjuntos en línea, deberá señalar las URL de CID en lugar de las URL de datos en el cuerpo de html.

Hay muchas bibliotecas modernas que le permitirán enviar correos electrónicos con archivos adjuntos en línea fácilmente. Pero escribí una secuencia de comandos de muestra en VBScript con la biblioteca CDO, lista para usar si tiene instalada una caja Windows 2000+.

Preparemos el entorno de prueba.

Coloque los archivos en un directorio como se muestra en la captura de pantalla a continuación.

tpl.html es el archivo de plantilla que proporcionó. Tendrá que hacer algunos cambios en este archivo.

Reemplace ambos elementos img con los siguientes, respectivamente. Tenga en cuenta que las URL de datos se han ido. image1 e image2 son los ID de contenido especificados para cada archivo adjunto en línea en el script. Nada asociado con los nombres de archivo aquí.

<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

Haga doble clic y espere las instrucciones.

Ver también https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+inline+image

Estoy enviando correos electrónicos a mis miembros y parece que Gmail está bloqueando las imágenes que coloco en el correo electrónico. Estos están incrustados como una cadena codificada en base 64 en una etiqueta img. He consultado varios hilos en línea sobre Gmail que no envía imágenes pero que no ha encontrado nada que ayude. Estas son algunas de las cosas que he intentado hasta ahora. 1. habilitó imágenes externas en Gmail (a través del icono de configuración) 2. redujo el tamaño de las imágenes a menos de 8000 bytes (Outlook.com no enviaría imágenes ~ 15000 bytes)

Las imágenes las recibo bien si las envío a una dirección de correo electrónico de outlook.com, pero en Gmail el src de la etiqueta de img está vacío y no aparecen imágenes en el correo electrónico. Estoy usando https://putsmail.com para probar / enviar mis correos electrónicos, por lo que sé que el problema no es un problema con SendGrid (mi servicio de envío de correo electrónico) o mi aplicación.

Aquí está una de mis plantillas a continuación. Estoy usando una plantilla de correo electrónico de Litmuss. Todo a continuación es básicamente el predeterminado, excepto la información adicional que agregué como las imágenes y algún texto adicional en el cuerpo del correo electrónico.

¡Aquí hay un jsfiddle con una plantilla completa con datos de imagen que se puede copiar directamente en putsmail y enviarse para probar! Cualquier ayuda o información sobre por qué Gmail no envía las imágenes sería genial.

<!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="https://YogaBandy.com" 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="https://www.YogaBandy.com/Space/Public/@Model.SpaceId" 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="https://www.YogaBandy.com/Profile/Public/@Model.HostId" 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="https://YogaBandy/Contact.com" 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="https://YogaBandy.com" target="_blank" style="color: #111111; font-weight: 700;">view it in your browser</a>.</p> </td> </tr>   </table>  </td> </tr> </table> </body> </html>

tl; dr

A Gmail y algunos otros clientes no les gustan las imágenes codificadas en base64 .

Historia completa

Lo primero que hice fue ver "Mostrar original" en Gmail. Para mi sorpresa, el contenido sin procesar todavía tiene sus datos de imagen incrustados:

Eso me dice de inmediato que gmail simplemente está eligiendo filtrar este contenido. No pude encontrar el motivo. Algunas conjeturas señalan la longitud de los datos codificados . Otros hablan sobre la forma general en que Gmail filtra las imágenes . Incluso hay registros de que esta técnica funcionó hace algunos años .

Además, cuando veo el mismo correo electrónico exacto en un cliente externo como Newton (antes Cloud Magic), veo imágenes renderizadas correctamente.

Todo eso apunta a un hecho simple, aunque triste, que a gmail no le gusta las imágenes codificadas en línea. No en el navegador y no en sus aplicaciones móviles.

De hecho, al final descubrí una publicación de 2013 del blog Campaign Monitor que concluye con los mismos resultados.

No use imágenes incrustadas en línea.