Gmail shows download icon on images of HTML Email
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 opend in gmail inbox, it shows download icon on some of images (not all), while their generated html is same when compared to images without download icons.
Why would gmail add download icons for images on emails. Looks like its treating images like attachment. Any info, fix or suggestion is appreciated ?? Here is the generated html that we are sending-
<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 protected]
Web: www.my-website-address.com
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="complianceFooter">
</div>
</td>
</tr>
</table>
following link are wondering for somthing similer..
http://www.codeproject.com/Questions/439012/Email-images-are-rendered-as-attachments-in-gmail
https://productforums.google.com/forum/#!topic/gmail/BosiJUnYDt0
Is it some sort of bug or anything ?? If you guys can provide me any link or something, that would be great.. Thank you guys
Answer
I have fixed this by wrapping my large images in an anchor tag like this one:
<a href='#'>
If you don't want the user's cursor to indicate a link, add style='cursor: default;' to your img element.