Captioned Images

Images are incredibly important to HTML email, and can often mean the difference between an effective email and one that gets a one-way trip to the trash bin. An image with a caption - whether it’s one line or a paragraph - is one of the most common design patterns found on the web and in email.

Captioned images follow 4 basic configurations, where an image is accompanied by text content on the top, right, bottom, or left of an image. Occasionally, you’ll see combinations of those configurations.

Generally speaking, the architecture behind these content blocks is very simple: a single table with two cells that contain the image and text separately. The table is styled with a background color and border, and text styling is applied on the text cell. For spacing, padding is applied to both cells.

Image with Top Caption

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
  <tr>
    <td valign="top" style="color:#505050; font-family:Georgia, serif; font-size:12px; font-style:italic; line-height:100%; padding-right;10px; padding-top:10px; padding-left:10px;">
      The Eiffel Tower
    </td>
  </tr>
  <tr>
    <td style="padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;">
      <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/europe_02_294x275.png" class="captionImage" style="display:block; max-width:580px;" />
    </td>
  </tr>
</table>

Image with Bottom Caption

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
  <tr>
    <td style="padding-top:10px; padding-right:10px; padding-bottom:0; padding-left:10px;">
      <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/europe_02_294x275.png" class="captionImage" style="display:block; max-width:580px;" />
    </td>
  </tr>
  <tr>
    <td valign="top" style="color:#505050; font-family:Georgia, serif; font-size:12px; font-style:italic; line-height:100%; padding-right;10px; padding-bottom:10px; padding-left:10px;">
      The Eiffel Tower
    </td>
  </tr>
</table>

Image with Left Caption

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
  <tr>
    <td valign="top" style="color:#505050; font-family:Georgia, serif; font-size:12px; font-style:italic; line-height:100%; padding-top:10px; padding-right;10px; padding-bottom:10px; padding-left:10px;">
      The Eiffel Tower, designed by Gustave Eiffel and built in 1889, is located in Paris, France. For 41 years, it was the tallest man-made structure in the world.
    </td>
    <td style="padding-top:10px; padding-right:10px; padding-bottom:10px;">
      <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/europe_02_294x275.png" class="captionImage" style="display:block; max-width:580px;" />
    </td>
  </tr>
</table>

Image with Right Caption

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
  <tr>
    <td style="padding-top:10px; padding-bottom:10px; padding-left:10px;">
      <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/europe_02_294x275.png" class="captionImage" style="display:block; max-width:580px;" />
    </td>
    <td valign="top" style="color:#505050; font-family:Georgia, serif; font-size:12px; font-style:italic; line-height:100%; padding-top:10px; padding-right;10px; padding-bottom:10px; padding-left:10px;">
     The Eiffel Tower, designed by Gustave Eiffel and built in 1889, is located in Paris, France. For 41 years, it was the tallest man-made structure in the world.
    </td>
  </tr>
</table>