HTML email - spaces between images in Outlook 2013

Question

I am composing an HTML email address that looks great in every major email client except Outlook 2013, which adds vertical gaps between my images. Unfortunately, I do not have Outlook 2013 installed on my computer, so it is difficult to verify, but a screenshot from my client suggests that it looks like this:

My code is available here - HTML version .

I have no idea what else I can do to get rid of the spaces - I set the line height for tds and images to zero, I set the images to display: block, I set the tables to border 0, cellpadding and cellpacing zero, and border- collapse: collapse. What else can I do to fix this?

Edited to add - I'm really not sure if there are gaps between the images or the rows of the table. In the screenshot, it looks like it is a table row.

Answer 1

The problem is solved - changing the height of the tds line containing the images by the height of the image, and not 0, eliminates the gaps and does not break the layout in other clients. So,

<td width="150" style="line-height: 83px;"> <img src="" height="83px"> </td> 

Answer 2

You have problems because you are mistaken about the whole layout. You do not need to tear the image of your picture into several parts and definitely should not have the image containing the letters "DS" from the name in the center.

Since you have a complex layout, it is better to use colspans and nested tables - this is a cleaner method than cutting images into small pieces. Images that are cut horizontally will always cause problems - if not in the original sending, Outlook will create spaces there if it was sent anyway. If you need to cut the image, try to make it vertically, as it will remain completely intact for all customers.

It is also good to have all the CTAs (calls to action) and important copy / text in html, not images, as most clients block images by default. It is also believed that spam has an email with a poor ratio of images to text.

Try:

 <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" width="450"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" width="400" style="padding:30px;"> Fall in love with... </td> <td valign="top" width="50"> <!-- It is easier to split an image vertically --> <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;"> </td> </tr> <tr> <td colspan="2" valign="top" width="450"> <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;"> </td> </tr> <tr> <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;"> Luxury Watch Brands <!-- Titles like this should always be in text not images --> </td> </tr> <tr> <td colspan="2" valign="top" width="450"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="150"> <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;"> </td> <td width="150"> <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;"> </td> <td width="150"> <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;"> </td> </tr> </table> </td> </tr> </table> </td> <td valign="top" colspan="3" width="250"> <table width="250" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;"> </td> </tr> <tr> <td> <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;"> </td> </tr> <tr> <td> Shop Luxury Watches > <!-- Call to actions are better in text not images --> </td> </tr> </table> </td> </tr> </table> 

Answer 3

the best conclusion for the sender can be made by cutting the image vertically (not horizontally) and placing it in several nested on one line. He will work flawlessly in all clients.