Image Tag

Here is the structure for setting up an image for Email.

<img src="http://placehold.it/200x90" alt="" width="200" height="90" border="0" style="display:block;" />
  • Width and height are always needed
  • Border=”0″ and display:block are always needed
  • Alt tag is always needed
  • If there is no text on the image leave the alt tag empty
  • If the image has words, make sure to add them and style alt text

Style the alt text for an image so when images are turned off, they style, heirarchy, and content can be read and understood. Here is how to do so:

<td align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#3a3a3a; padding:0 0 0 0;"><img src="http://placehold.it/200x90" alt="" width="200" height="90" border="0" style="display:block;" /></td>

Link your images the same way you would do text. Include styling so the Linked Alt Text ends up styled correctly.

<td align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#3a3a3a; padding:0 0 0 0;"><a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;"><img src="http://placehold.it/200x90" alt="" width="200" height="90" border="0" style="display:block;" /></a></td>

Note 1: Add an alt tag to every image. Images without words should have an empty alt tag (alt=””). If images are coded without alt tags, screenreaders will read the image path aloud. That means instead of reading “Welcome to Table Tr Td”, it would read, “h-t-t-p-:-/-/-w-w-w…”, which would not be a good experience. Empty alt tags will be skipped (ignored) by screen readers.

Note 2: Only add pertinent alt text. Extra, not relatable alt text can cause deliverability issues if an inadvertent “free” or “spam” is added. Ex: “Girl freeing a horse from a barn while eating a can of spam.” If you have a question, leave the alt tag blank (alt=””).

How to use a Spacer Gif correctly to provide pixel perfect spacing in an Email.

For Height

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="20" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="20" border="0" style="display:block;" /></td>
  </tr>
</table>

For Width

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="20" align="left" valign="top"><img src="images/spacer.gif" alt="" width="20" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

For Full Width (<hr />)

<table bgcolor="#000001" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="1" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Images under 20 pixels will display at an increased size in Outlook 2013. To prevent this, add a style with a font-size of 0 and a line-height of 0 to the <td>.

Short Spacer gif

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Short Image

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:10px;"><img src="http://placehold.it/500x10" alt="" width="500" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

To resize images from a desktop for a responsive mobile version, place a class on the image. For a fluid design use a width: 100% and a height: auto. For a non fluid design, use fixed measurements based on a ratio of your image dimensions.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top"><img src="http://placehold.it/500x90" alt="" width="500" height="90" border="0" style="display:block;" class="photo" /></td>
  </tr>
</table>

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.photo {
  width: 100% !important;
  height: auto !important;
}
}
</style>