Overlapping images in emails (including Outlook)

The problem

Recently, I had to create an email template that contains multiple images and the designer came up with this design:

There are 2 major problems that need to be solved here:

make the images round
overlap the images

The solution

The following snippet seems to solve the problem in a relative easy way:

<html>
  <body>
    <table align="center">
      <tr>
        <td width="40" style="max-width: 40px">
          <img width="84" style="border-radius: 180px" src="https://i.imgur.com/49K69xc.jpeg" />
        </td>
        <td width="40" style="max-width: 40px">
          <img width="84" style="border-radius: 180px" src="https://i.imgur.com/AKNRGd9.jpeg" />
        </td>
        <td width="40" style="max-width: 40px">
          <img width="84" style="border-radius: 180px" src="https://i.imgur.com/q4Qcpth.jpeg" />
        </td>
      </tr>
    </table>
  </body>
</html>

Because the email clients and CSS do not get along very well we must use tables in order to style the template:

we have a table with one row containing 3 td tags, each of them with an img tag
the images have a width set to 84 pixels and a border-radius set to 180px
the overlapping is done using the max-width CSS style. The image has a width of 84px, but it’s parent has a maximum width of 40px.

Here is how it looks in an email:

The Outlook problem

The classic version of Outlook for Windows does not use a modern rendering engine for HTML and the email looks like this:

the images are not rounded, because border-radius is not supported
they are not overlapped because the image’s width forces the td to expand and ignore max-width

This is why we need to use a different approach in order to make the template look the same in Outlook:

<td width="40" style="max-width: 40px">
  <!--[if mso]>
    <v:oval xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:84px;width:84px;position:relative" fill="t" strokecolor="white" strokeweight="4px">
      <v:fill type="frame" src="https://i.imgur.com/49K69xc.jpeg" />
    </v:oval>
  <![endif]-->
  <!--[if !mso]><!-->
    <img width="84" style="border-radius: 180px" src="https://i.imgur.com/49K69xc.jpeg" />
  <!--[endif]-->
</td>

Here are the key aspects that make this solution work on Outlook:

We use VML elements that are supported only by classic Outlook
We use Outlook conditionals to display those new elements only on Outlook
The v:oval element solves the border-radius problem
VML elements support position: relative CSS and makes it so the element itself does influence the width of the td, so the td will have the width fixed to 40px, but the v:oval will be 84×84. This mimics the max-width property

In the end, the email will look like this:

Overlapping images in emails (including Outlook)

The problem

The solution

The Outlook problem

Comments

Leave a Reply Cancel reply

More posts

Overlapping images in emails (including Outlook)