Gmail会在HTML电子邮件的图片上显示下载图标

Question

我们有一个Html Builder，允许您为电子邮件创建响应式HTML。我们正在使用第三方引擎批量发送电子邮件。问题是，当电子邮件在gmail收件箱中打开时，它会在某些图像上显示下载图标（并非全部），而与没有下载图标的图像相比，它们生成的html相同。

为什么gmail会在电子邮件中添加图片的下载图标。看起来像处理图像像附件。任何信息，修复或建议表示赞赏？ 这是我们发送的生成的html -

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyContainer">
    <tr>
        <td align="center" valign="top" >
            <table border="0" cellspacing="0" cellpadding="0" class="emailContainer">
                <tr>
                    <td>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; padding: 0px;">
                                                <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/firsthalf.jpg" width="598" border="0" style="max-width: 600px;" hspace="0" vspace="0">
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; padding: 0px;">
                                                <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/secondhalf.jpg" width="300" border="0"style="max-width: 300px;" hspace="0" vspace="0">
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="text-align: center; padding: 0px;">
                                                <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/2110513155A40L.jpg?asd" width="250" border="0" style="max-width: 250px;" hspace="0" vspace="0">
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                            <td>
                                                <h1>Ready To Create An Amazing Product??</h1>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>Now that you've selected your template layout, it's time to get the creative juices flowing and show off your awesome email marketing skills. You can build the perfect email using our powerful and easy-to-use editor. You can drag-and-drop different types of blocks directly into your email and start adding text, images and links. You can also go to the 'Design' tab to customize all the fonts and colors.</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top">
                                    <div align="center">
                                        Phone: 555-555-1234 | Email: email@my-website-address.com
                                        Web: www.my-website-address.com
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div class="complianceFooter">
            </div>
        </td>
    </tr>
</table>

以下链接想知道somthing similer ..

http://www.codeproject.com/Questions/439012/Email-images-are-rendered-as-attachments-in-gmail

https://productforums.google.com/forum/#!topic/gmail/BosiJUnYDt0

是某种bug还是其他什么？如果你们可以提供任何链接或东西，这将是伟大的.. 谢谢你们

Answer 1

我通过将我的大图像包装在像这样的锚标签中来解决这个问题：

<a href='#'>

如果您不希望用户的光标指示链接，请将style='cursor: default;'添加到您的img元素。

Answer 2

这是几周前Google实施的一项新功能，我相信它只适用于“大型”图片，但我无法找到确切的限制。在你有一个非常大的英雄形象的情况下似乎发生了更多。

作为一项功能，我认为它更适用于您认识的人为您提供嵌入电子邮件中的照片，还有另一项功能可让您将其直接添加到Google云端硬盘。

A Google Plus post from Gmail themselves

A blog post about it

Answer 3

我能够通过将我的图像垂直切割成4个相等的部分，然后使用以下代码对4个图像进行编码来解决这个问题。

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" summary="Split Image">
<tr>
<td><img src="image1" width="200" height="200" alt="Part 1x1" border="0" /></td>
<td><img src="image2" width="200" height="200" alt="Part 1x2" border="0" /></td>
<td><img src="image3" width="200" height="200" alt="Part 1x3" border="0" /></td>
<td><img src="image4" width="200" height="200" alt="Part 1x4" border="0" /></td>
</tr>
</table>

Answer 4

正如@Pebbs上面解释的那样，Gmail似乎可以将特定大小限制内的图像检测为可下载的附件。为了避免这种情况，对我有用的是使用“background”属性在<td>标记内显示图像。这有效地使Gmail将图像视为背景图像，而不是可以下载的<img>。例如，在您的代码中而不是以下：

<td>
<img src="your_image.jpg" alt="Your Image" height="114" width="275"  style="border: 0 none;" />
</td>

使用：

<td background="your_image.jpg" valign="top" height="114" width="256" style="background-position: 0 100%; background-repeat: no-repeat;" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:256px;height:114px;">
<v:fill type="tile" src="your_image.jpg" color="#e6e6e6" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>

请注意，旧版电子邮件客户端可能需要<td>之间的VML来正确呈现图像。

Answer 5

防止图像下载和删除Gmail中的下载图标的简单方法

方法1： - 将.a5q {display: none !important;} css类添加到标记中。

方法2： - 将tabletabletable div {display: none !important;}样式添加到标记内的部分。

方法3： - 只需使用以下css样式的（锚点）标记绑定图像标记：
style="cursor:default;"

方法4： - 执行此操作的另一种方法，再次使用以下css样式的（锚点）标记绑定图像标记：
style="pointer-events:none;"

Answer 6

在营销电子邮件中，您可能最好还是尽可能多地将图片链接到您的网站。

您的大量销售横幅应该只是链接到您的网站 - 不需要任何技巧。

 <a href='https://bigsale.com'>...</a>

如果你有一个实际产品的大图像，那么它实际上是一个很好的功能，允许它在GMail内的灯箱中打开。在这种情况下下载应该不那么不合适。

Answer 7

添加此.css类以删除下载图标。

.a5q {display: none !important;}

Answer 8

我已通过将此代码添加到syles

来修复此问题

table table table div {display: none !important;}