Postmatic

Fixing image widths in Beta 15 (Or how to include responsive images in Thunderbird)

Beta 15 is available with another round of small tweaks. The most notable feature is that overly-large images in certain versions of Gmail and Thunderbird have been fixed.

Some words of wisdom on responsive and retina images in Thunderbird

Thunderbird is a popular open-source desktop email client made by Mozilla. We have heard from some users during our beta period that our templates do not render well when using it.

The problem

Thunderbird doesn’t like to pay attention to the width attribute of the img tag. It actually ignores it. Regardless of what image width you declare either via the width attribute or with any css declarations, Thunderbird will render the image at the width of the actual image dimensions. Of all of the email clients we have wrestled with over the last few months, we’ve had the most difficulty with Thunderbird.

We faced blown out containers in Thunderbird during two different scenarios:

  1. Most all of our users want to serve a retina-ready header image or logo at the top of their template.
    They know most of their readers will be getting their content on high resolution mobile display and want their brand to look its best. The common way to serve retina images in email is to serve up an image which is double the size it needs to be (1200px) and use the img tag to condense the image down to half its size (600px). Then it looks pretty sharp. But not if the image actually displays as 1200px and either falls off the side of the screen or forces horizontal scrolling….
  2. We have to accommodate whatever images get put into the body of a post.
    This is the largest challenge. Part of the value we bring to sending you posts out over email is that you don’t have to change how you publish. Use whatever crazy plugins you want. Throw in galleries, videos, and some enormous images. We’ll take care of making sure it looks great in email. Well… that’s a big challenge.
    We’ve noticed that many of our beta users like to include enormous images in their posts but use responsive techniques to downsize them within their html. The results look great on desktop but are hard to wrangle via email. Keeping these images within a container was tricky.

Our solution

Here is how we won the battle to make overly-large images not blow out their container in Thunderbird.

  1. Make sure you have some sort of container element with a declared fixed width or max-width defined as px. Percentages will not work. In our case we use a max-width of 720px.
  2. Apply inlined css directly to the img tag: width:auto;max-width:720px;height:auto;display:block;.

It’s the combination of the max-width on the container followed by the max-width of the img that seems to do the trick. No other scenario worked for us. Granted our situation is more complicated than a standard email newsletter template because we have to have a framework in place which will keep any crazy WordPress content in check… but still. It shouldn’t be this hard.

Hopefully the above will help any other developers who are trying to make sure html email looks great in Thunderbird while still being responsive and high resolution for everyone else.

The Beta 15 Changelog