Android Gmail App: Horizontal 1px gaps between inline images (images in <td>)

Question

In the Android Gmail app, there is sometimes 1px of space between inline images ( with multiple that contain images). This will push the rightmost image outside the frame of the email. It seems to be happening with images of certain dimensions, possibly relevant to the size of the table / layout.

Code examples are below. Two screenshot examples are attached.

This forum post describes the bug but has no fix.

What I've tried: a lot. I tried the tricks in the mentioned google product forums post, but none worked.

Markup generated by https://www.inkbrush.com/ which has all the standard workarounds still displays this bug.

The problem is intermittent in Email on Acid's testing. Sometimes it will only appear on an actual device.

Screenshots, first one has broken images but it illustrates where images end up:

Sample from email I authored. Full file in this gist.

    <tr>
  <td valign="top">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
      <tr>
        <td valign="top">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><a href="http://tracking.telecharge.com/t/33334376/1094175919/73227780/0/81249/?x=83ab5506" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_08.jpg" style="display:block; display:block; max-width:312px;" width="312"></a></td>
            </tr>
          </table>
        </td>
        <td valign="top">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top"><a href="http://tracking.telecharge.com/t/33334376/1094175919/73694490/0/81249/?x=41ab12fe" target="_blank"><img alt="" border="0" height="30" src="http://content.telecharge.com/telecharge_marketing/20170425Waitress/WAITRESS_013_TELECHARGE_09.jpg" style="display:block; display:block; max-width:268px;" width="268"></a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

Sample from inkbrush's main demo:

    <tr align="left" style="border-collapse: collapse;border-spacing: 0;border: 0;  ">
    <td>
        <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;border-spacing: 0;border: 0; min-width:600px;">
            <tbody>
                <tr style="border-collapse: collapse;border-spacing: 0;border: 0;">
                    <td align="left" valign="top" style="   width:204px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/5ef86d691f3e7d7cf49f027d0f29d03d-original.jpg" style="display:block; line-height:0; border:0;  width:204px; max-width:204px; min-width:204px; height:60px; max-height:60px; min-height:60px;" width="204">


                    </td>

                    <td align="left" valign="top" style="   width:51px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/f8c41fc2b6d48fca6d4d0b1510c80a84-original.jpg" style="display:block; line-height:0; border:0;  width:51px; max-width:51px; min-width:51px; height:60px; max-height:60px; min-height:60px;" width="51">


                    </td>

                    <td align="left" valign="top" style="   width:49px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/c93fa6d4d1ffa2eb6a5a992205d1160a-original.jpg" style="display:block; line-height:0; border:0;  width:49px; max-width:49px; min-width:49px; height:60px; max-height:60px; min-height:60px;" width="49">


                    </td>

                    <td align="left" valign="top" style="   width:50px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/19df3e027e0c5e2391f76a22de1f0743-original.jpg" style="display:block; line-height:0; border:0;  width:50px; max-width:50px; min-width:50px; height:60px; max-height:60px; min-height:60px;" width="50">


                    </td>

                    <td align="left" valign="top" style="   width:52px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/28a69a7158c8ec60d7cadcbcb2cfe211-original.jpg" style="display:block; line-height:0; border:0;  width:52px; max-width:52px; min-width:52px; height:60px; max-height:60px; min-height:60px;" width="52">


                    </td>

                    <td align="left" valign="top" style="   width:194px;  height:60px; ">

                        <img border="0" height="60" src="./497056_files/caf6117f5e93df6c24631c06c09c06c6-original.jpg" style="display:block; line-height:0; border:0;  width:194px; max-width:194px; min-width:194px; height:60px; max-height:60px; min-height:60px;" width="194">


                    </td>

                </tr>
            </tbody>
        </table>
    </td>
</tr>

Answer 1

I may have found a fix.

If instead of defining the html attributes width and height with the literal image dimensions, you do width="100%" height="auto", and then set a max-width and max-height in css, like:

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

<td><img src="image1" width="100%" height="auto" alt="" border="0" style="display:block; max-width:200px; max-height:30px"/></td>

That fixed it for me!

via https://litmus.com/community/discussions/6453-horizontal-gaps-between-images-in-android-gmail#comment-11982