Gmail hides external e-mail images, even after user allows them

Question

I'm trying to insert a signature with images in html e-mails. I have some issues with GMail (it works fine with the iPhone client).

Before the user accepts the image, they are properly sized, and the alt text is visible :

The HTML for each image is then :

<img alt="Bonne" width="80" height="80">

So this is normal, but when the user clicks on "Allow images in this e-mail" (don't know the exact label in english), they simply disappear :

If I inspect the element, I can see that some code has been added to hide them :

<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.png" alt="Bonne" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 80px 80px; ">

Don't know what Gmail does this, does somebody has an idea ?

EDIT

Original image tag :

<img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.png" alt="Mauvaise" width="80" height="80" style="border : 0; width:80px; display: block;   margin-left: auto;   margin-right: auto;" hspace="10" />

Global HTML :

    <center>
        <table border="0" cellpadding="0" cellspacing="0" id="backgroundTable" style="border-color:#FFFFFF" >
            <tbody>
            <tr>
                 <td valign="top">
                    <div >
                        <h4 class="h4">Si vous avez une seconde, vous pouvez évaluer ma réponse :</h4>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border-color:#FFFFFF">
                        <tbody>
                            <tr>
                                <td valign="top" width="180" class="leftColumnContent">
                                    <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
                                        <tbody><tr>
                                            <td valign="top">
                                                <a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Happy" style="text-decoration: none;outline: none; " title="Bonne">
                                                    <img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/happy.png" alt="Bonne" width="80" height="80" style="border : none;  width:80px; display: block;   margin-left: auto;   margin-right: auto;"  />
                                                    <div style="text-align: center;">
                                                       <h4 class="h4" style="text-decoration: underline; color:#50b748; margin-bottom:0;">Bonne</h4>
                                                       <span style="color:#50b748;">Rapide, utile et agréable.</span>
                                                    </div>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                                <td valign="top" width="180" class="centerColumnContent">
                                    <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
                                        <tbody><tr>
                                            <td valign="top">
                                                <a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Neutral" style="text-decoration: none;outline: none; margin-bottom:0;" title="Moyenne" >
                                                  <img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/neutral.png" alt="Moyenne" width="80" height="80" style="border : 0; display: block; width:80px;   margin-left: auto;   margin-right: auto;" >
                                                  <div   style="text-align: center;">
                                                    <h4 class="h4" style="text-decoration: underline; color:#ffd300; margin-bottom:0;" >Moyenne</h4>
                                                    <span style="color:#ffd300;">Acceptable, mais insufisant.</span>
                                                  </div>
                                                </a>

                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                                <td valign="top" width="180" class="rightColumnContent">
                                    <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-color:#FFFFFF">
                                        <tbody><tr>
                                            <td valign="top">
                                                <a href="http://demo.smartadserver.com/Shared/happy-customers/vote/21142b09-3eab-4c07-aa64-e09e6924cd89/Unhappy" style="text-decoration: none;outline: none;" title="Mauvaise">
                                                  <img src="http://demo.smartadserver.com/Shared/happy-customers/Content/images/unhappy.png" alt="Mauvaise" width="80" height="80" style="border : 0; width:80px; display: block;   margin-left: auto;   margin-right: auto;" hspace="10" />
                                                    <div style="text-align: center; ">
                                                    <h4 class="h4" style="text-decoration: underline; color:#be1e2d; margin-bottom:0;">Mauvaise</h4>
                                                        <span style="color:#be1e2d;">Malheureusement, je n'en suis pas satisfait.</span>
                                                    </div>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
        </table>
    </center>

Thanks

Answer 1

That kind of attribute is not added by Gmail but a plugin that the browser is using - in particular AdblockPlus plugin (that happens to have smartadserver.com in their filters). Your HTML is working perfectly in Gmail otherwise, I tried it out.

You can display it in your browser by disabling the plugin or removing smartadserver.com from the Adblock filter list.

However ... if you want to prevent this to happen to other people ... host the images ad another server, so that the domain won't be blacklisted with ad filters.

Also for another compatibility note ... some mail clients were not supporting png image format.