As image blocking in email continues to become the norm, one absolute must is to make sure you include the width and height attributes in your image tags.

When most email clients (especially desktop based ones like Outlook) disable images, they show an empty image placeholder in its place. Because these email clients don’t actually download the images from the server, the only way they can figure out the dimensions of that placeholder is to look at the included width and height attributes. If none or only one is provided, they just take a guess, which in almost every case results in completely destroying what’s left of your design.

Here’s a perfect example of this in action. Just this morning I received an email newsletter that only specified the height for most images in the email, and not the width. When Outlook displayed the email, it got the height right, but was way off on the width side. Here’s how the email looked when I first opened it:

The original email with images disabled

To see a comparison of how it’s supposed to look, here’s a screenshot of the email with images enabled:

The original email with images enabled

By not including the width attribute in any image tags, Outlook had no idea what width to use and its best guess was unfortunately way off. This made an otherwise readable email a complete nightmare that was almost impossible to get anything out of.

To provide a comparison, I checked out the source and added the correct width attribute to each image to see what the new results would be. Here’s a screenshot of the new version that took about 5 minutes to update:

The improved email with images disabled

The updated version that includes all width and height attributes is a big improvement over the initial version. It clearly resembles the intended design and I can easily scan the table of contents and start scrolling to read the rest of the content. The email is completely usable even with no images being visible.

While there are certainly better examples of emails designed to look and work well with images disabled, the point is still very convincing. By ensuring width and height attributes are present for all image tags, we give our subscribers a much better chance of getting a usable email, even with images disabled.

  • Rob Lewis

    I came across this very same problem in an email I was coding this week – 2 images next to each other without width & height specified were blocked, had the usual Outlook text about downloading the images and completely broke the layout.

    So this is a very timely post, thanks very much.

  • Matt Sweetman

    This is only a problem with Outlook and it can be easily overcome with the addition of the style “hidden” tag in the td, as long as the td has a width. Example:

    Here are some reason to NOT include height and width attributes (you have to exclude both, otherwise it becomes proportional):

    1. On web mail accounts, and in Outlook with the above technique, real text headlines and content can appear higher in the preview pane as images collapse and allow below elements to move up.
    2. It’s less code, and if you update your images and make then higher or narrower, then it means you don’t have to update the HTML — a slight time saver.

    I’d suggest looking at the type of email addresses on your list, if you primarily have web mail addresses (yahoo, gmail, hotmail, etc…) then including height and width is especially not an issue.

  • Matt Sweetman

    Let’s see if the HTML code example works this time:

    <td width="150" style="overflow:hidden;"><img src"…"></td>

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free