You probably get a lot of email and even more newsletters. My HTML email newsletters are all mixed in with my plain-text emails, and when I’m going through my inbox, it’s a quick and efficient process. I want to be able to get the point of each email quickly. When I open an HTML email and see rows of blank outlined boxes, I immediately think, “this isn’t relevant or necessary to me; moving on.” I very rarely decide to turn the images on. One alarming statistic found that 30% of recipients are unaware that images are even disabled in the first place!
Email clients disable embedded images to protect you from spam. Spammers will use an image as a beacon; when downloaded, it signals that you have an active and valid address. Spam protection is a good thing, but automatically-disabled images make designing a compelling marketing email tricky. Fortunately, there are a few things you can do.
Style the image’s alt text
Many email designers are hip to adding an alt attribute to all important images, ensuring that — at the very least — text will show up when the image does not. Instead of just a straight description of the image, a savvy email designer uses the alt attribute to place an offer or call-to-action. An even savvier email designer takes it one step further and styles the alt text.
One very simple way we do this at Etsy is with our logo. Instead of showing a box with alt text that just says “Etsy”, we style the alt text to look as much like our wordmark as possible. The result is that when viewing the email with images off, you see something very close to what our logo looks like.
The code looks like this:
<img src="etsy_logo.png" width="47" height="24" alt="Etsy"
style="color:#d15600; font-family:georgia,times,serif;
font-weight:normal;text-decoration:none; border:0" />Not every logo lends itself so easily to this technique, but there are plenty of other ways to use it. For example, if your email makes use of image-based buttons, you can style the alt text to come up with a pretty convincingly clickable fallback.
Of course, like any feature of HTML email, alt text doesn’t display consistently across all clients. Campaign Monitor has a handy breakdown that shows how alt text displays across different clients.
Make your image into pixel art
Take that would-be empty image block one step further and make a lo-fi fallback version of your image using tables and background colors. Pizza Express uses this technique in a variety of ways.
Hand-coding a custom pixel art table for each email is a time-consuming task, but there are a few apps on the scene that are making this easier.
Style Campaign created a free app that pixelates your image while keeping email-friendly compression in mind. Here’s how it works:
“The application [...] can be run with multiple parameters to allow HTML output in a variety of formats, from standard HTML table layout to full CSS. The application utilizes a simple run length style compression system, using table cell
colspanto create rows of contiguous color. This saves significantly on file size and client processing time. A background color can also be passed as a parameter, so that cells containing the specified color do not have to have their color defined in the table cell, further saving file size.”
They readily admit that compression for large images continues to be an issue, and they recommend that the tool be used for smaller items like logos and icons.
Email on Acid offers a very consumer-friendly app called Mozify that does the same thing. Among other features, Mozify lets you control how pixelated your image will be be, letting you experiment with larger feature images while saving on file size. Watch the Mozify intro video to see it in action.
Designing for the inbox is rife with challenges. There’s a dizzying variety of clients, devices, and browsers to contend with, along with more emails being sent than ever before. Inboxes are a special mix of a personal and practical space. Once you get them to open the email, it’s worth taking the time to greet them with more than a blank screen.
