Blog

  • Overlapping images in emails (including Outlook)

    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: