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 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: [phone] | 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

Solution 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

Solution 2

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.

Solution 3

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>

Solution 4

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.

Solution 5

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

View more solutions

Comments

[theRyanMark]

This does not work any longer. The powers at Google seem to be stripping that bit of CSS out of the head of the emails. This worked for about 3 weeks. Even overkill css like the below does not work: .a6S { display: none !important; opacity: 0 !important; visibility: hidden !important;} .a5q { display: none !important; opacity: 0 !important; visibility: hidden !important;} .a6T { cursor: inherit !important; }

[OutstandingBill]

I get the download offered on a 100 by 396 pixel .png file (11.2 kb), but not a 200 by 51 .png (3.59 kb). So somewhere in between.

[TWGerard]

Turns out that Gmail actually strips the content of anchor tags when href='#', so you have to apply your cursor CSS to the image itself. Answer has been edited to reflect this.

[4ever Youngz]

the 'style="cursor:default;' doesn't seem to work for me. Wouldn't you need to add that on hover, which you can't do on inline....

[Pankaj Dubey]

You didn't get the question. We have a html builder which is being used by our customers to create html for their marketing email.

[aruno]

Sorry missed that part. But If you never found a perfect technical solution I suppose you could put something to the effect of 'We recommend putting a URL for every image to maximize the number of clicks through to your website'. Maybe a default link for an email that would be applied to all images without a custom link. I always hate in these email builders to have to double check every link. If it automatically went to a default link that would be a cool feature.