How to have multiple responsive images on the same table row

Coding responsive email newsletters could be tricky sometimes, if not all the times. I'm gonna show you today a quick trick on how to have multiple images side by side to display responsive. I tested this in Email on Acid and Litmus and it works perfectly in all email clients and on all devices.

The first thing we will do is to code the style for fluid responsive images. Why fluid? Because, again, I only use one breaking point which is the email width, typically 600px. Everything below 600 will start displaying responsive occupying the full width of the mobile screens.

This is how I code the CSS for images to be fluid responsive:

body[yahoo] img[class="menu"] {width:100% !important;height: auto !important;-ms-interpolation-mode: bicubic !important;}

Notice a couple of things. Firstly I never put height on images so they can scale up and down at the full 100% width of the screens while the height is going to be automatically calculated. In addition to that I use -ms-interpolation-mode which will smoothen the lines and will help providing better looking images in Internet Explorer / Microsoft browsers and email clients. -ms-interpolation-mode has two possible values, bicubic and nearest-neighbor but I use always bicubic because the processing is more complex and the images should look better.

Now let's move onto the HTML part. For the purpose of this tutorial we will create a table with 4 columns where each column will have an image. On mobile we will have the images scale down so instead of stacking the columns we will keep the same exact layout as we have on desktop.

But the magic happens when we have the four image display identical everywhere. For having them keep the aspect ratio we will use percent for the columns width so four columns each with 25% width:

<td style="border-collapse: collapse;" width="25%"><img style="display:block; border:0" src="http://emailsnob.com/bl-content/uploads/pages/9a7dd5a3385b107bd4873fb915225469/150_1.png" alt="" width="150" class="fluid"/></td>

Notice the following:

  • percent width on the table cell
  • only width and no height on the image
  • class fluid on the image

This is the full HTML:

<html>
   <style type="text/css">
      body[yahoo] img[class="fluid"] {width:100% !important;height: auto !important;-ms-interpolation-mode: bicubic !important;}
   </style>
   <body>
      <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
            <td style="border-collapse: collapse;" width="25%"><img style="display:block; border:0" src="http://emailsnob.com/bl-content/uploads/pages/9a7dd5a3385b107bd4873fb915225469/150_1.png" alt="" width="150" class="fluid"/></td>
            <td style="border-collapse: collapse;" width="25%"><img style="display:block; border:0" src="http://emailsnob.com/bl-content/uploads/pages/9a7dd5a3385b107bd4873fb915225469/150_2.png" alt="" width="150" class="fluid"/></td>
            <td style="border-collapse: collapse;" width="25%"><img style="display:block; border:0" src="http://emailsnob.com/bl-content/uploads/pages/9a7dd5a3385b107bd4873fb915225469/150_3.png" alt="" width="150" class="fluid"/></td>
            <td style="border-collapse: collapse;" width="25%"><img style="display:block; border:0" src="http://emailsnob.com/bl-content/uploads/pages/9a7dd5a3385b107bd4873fb915225469/150_4.png" alt="" width="150" class="fluid"/></td>
         </tr>
      </table>
   </body>
</html>

The result will be something like this on both desktop email clients as well as on mobile phones:

How to calculate the table columns in percents width using a math formula thought in primary school

You will need to calculate the width in percents for each column based on the image width. I used a simple example of 600 / 4 columns so in my case I had 150px for each image and 25% for each column to make a total of 600px email width or 100% width. However your numbers might vary.

The math formula I'm using is called the Rule of Three and consists in finding the percent of an unknown variable let's call it D when you know A, B and C. Let's say we need to know the width of the first column when we know that the total of the three columns is 600px or 100%. The rationale is this: if 600 is 100% then to find out how much is 150px in percent we will do: 150 x 100 divided by 600 = 25%.

Apply this formula and you will have the width in percents for each column. 

You will notice the results won't be full numbers. You might get something like 13.1769 for the first image. The trick here is to have the sum of 4 result in a 100%. What I usually do is keeping only the first two digits while rounding it up, in this case the first column will be 13.18%. For the last column I make sure I subtract the first column width, second column width and third column width from 100. Again, you need to make sure the sum of your columns in percents is 100.

Wherever is possible I go for full numbers for the columns and slice the images accordingly. This leaves less space for weird computation in email clients so less changes for those images to have a slight different height which will result and less troubleshooting. When the images have a slight different height, aka 1 pixel difference, you will notice white lines based on what solid color background you use. The issue becomes even more pronounced when the images have a pattern resulting in misalignments. 

As a general rule of thumb, less fragmentation contributes to fewer bugs in email newsletters. So while you can have an unlimited number of columns in emails, bear in mind that the fewer they are the better. It will save you trouble later.

I hope you learned something useful today. Happy email coding! Your friend, the email snob.