Using Image Buttons in an Email
April 27, 2012
I am working on a project now that integrates recent vbulletin forum posts, as well as some other items, into an email, which is then sent out to members who have subscribed to receive this daily update.
I started by cleaning up the code, fixing styling and html errors, which is especially important when sending via email. There were a bunch of miss-closed html elements, like tables that were nested incorrectly, as well as a lot of invalid css. After the cleanup, I began making the requested changes and am now fine-tuning some design issues.
Since Outlook 2007+ uses Microsoft Offices rendering engine, it is necessary to do a bit of testing/fixing just to work with the broken HTML implementation and is, of course, no surprise that the design looked pretty off.
However, one thing that did surprise me was the way that Outlook 2007, and apparently higher, retrieve and cache images. When the email was loaded in Outlook 2007, it took forever to load and there ended up being a bunch of broken images.
In this case, the folks who had worked on the email before used a set of image buttons below each post, so depending on how many subscriptions you have, you might see those buttons well over 50 times in the email, which 5 or so different buttons in a row, this means those images might appear several hundred times in the email.
Since Outlook took forever to load and when it finally did, many of the image buttons were missing, I decided to check the http access logs and see if anything weird was happening. After a few quick greps, it seems like Outlook does not cache images, but instead simply reloads them again and again and again! This falls in line with the observations below, as in the first half of the email, the buttons loaded correctly, while the second half the same buttons appeared broken.
Now, this is, of course, one very good reason not to use image buttons like this in an email and we will be changing the design to remove these. However, it would still seem like the email client would be smart enough to cache the images.
After spending a bit more time checking, I soon found that it looks like Safari for OSX does the same thing. There are several users who use it and when checking the raw access logs, the buttons were requested repeatedly over the course of a few seconds. Since there is no referrer, it would appear these are loaded via a web-mail client, but this will require some more testing.
In any-case, the take-away is that using image buttons for something that might appear many times in an email is always a bad idea!