Gmail shows download icon on images of HTML Email

Question

We have a Html Builder, that allows you to create responsive html for emails. We are using a third party engine to send the emails in bulk. The problem is, when email is being o

Answer 1

This is a new feature Google implemented a several weeks back, I believe it only works on "large" images, but I could not find out the exact constraints. It seems to happen more so where you have a very large hero image.

As a feature I assume it's more intended where someone you know personally has provided you with a Photo embedded into the email, there is also another feature that allows you to add it straight to your Google Drive.

A Google Plus post from Gmail themselves

A blog post about it

Answer 2

As @Pebbs explained above, Gmail appears to detect images within certain size constraints as downloadable attachments. To circumvent this, what worked for me was using the "background" attribute to display the image within a <td> tag. This effectively makes Gmail perceive the image as a background image, rather than as a potentially downloadable <img>. So for example, within your code instead of the following:

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

Use:

<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>

Note that the VML in between the <td>s might be needed for older email clients to render the image properly.

Answer 3

Add this .css class to remove the download icon.

.a5q {display: none !important;}

Answer 4

I was able to fix this by cutting my image into 4 equal pieces vertically and then coding the 4 images in with the following code.

<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 5

In a marketing email you're probably better off anyway having as many images as possible link to your website.

Your massive sale banner should probably just link to your website - no tricks needed.

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

And if you have a large image of an actual product, then it's actually a nice feature allowing it to open in a lightbox inside GMail. The download in that context should appear less out of place.

Answer 6

Easy and clean way to prevent image downloading and to remove download icon in gmail

Method 1 :- Add .a5q {display: none !important;} css class into tag.

Method 2 :- Add tabletabletable div {display: none !important;} style into section within tag.

Method 3 :- just Bind your image tag with a(anchor) tag with following css style:
style="cursor:default;"

Method 4 :- An another method to do this , again just Bind your image tag with a(anchor) tag with following css style:
style="pointer-events:none;"