Important Email Image Checks – Will Your Design Explode in Outlook?

Email marketing teams large and small usually have a workflow that includes a robust pre-deployment checklist. It includes checks for content, design, functionality, subscriber lists, and much more.

Image validation should be included in that list, as well. This means double-checking your HTML image parameters to make sure they’ll display properly on every client.

For example, if a subscriber has images blocked on his or her client, failing to set certain image attributes can result in design flaws, or worse, a broken email. Outlook, in particular, is infamous for messing with emails that don’t have image attributes.

Image validation may be a routine step for many of you, but that doesn’t make it any less important! We’ll walk you through the important parameters to check and why you need them.

The image parameters we’re talking about in this post are related to the HTML attributes only and not the CSS that may be applied to your email image. While you may rely on your CSS to set your image parameters, remember that certain clients may ignore that CSS (hi, Outlook).

Yes, you may be doing these HTML attribute checks for only a few bothersome email clients but leaving them out could break your email on those clients. It’s important to keep every subscriber in mind and ensure your message is consistent for all audiences.

The first step in making sure your HTML attributes are up to scratch is to set all your image borders to zero (0). Why do this? Some email clients (older clients, to be honest) will add an ugly blue border around images or buttons with links.

With our image validation tool, you can apply border=”0” to all your email images with a quick click. We’ll do the work for you.

This one’s a biggie. An image without a fixed width attribute can get out of control and throw off the readability of your email, especially when the user has images turned off. You’ll often find this problem in – you guessed it – Outlook clients.

When you don’t set a pixel width for images, Outlook can blow up the picture to the point where it can take up the whole screen and span beyond the window. This can make text hard to read and overall, create a poor experience for the user.

For example, we forgot to set a width parameter for our social icons in this newsletter (the code reads style=” border: 0″ alt=”Facebook” height=”” width=””). In the Email on Acid image validation tool, you’ll notice red boxes highlighting the problem areas:

And, as a result, here’s what the newsletter looked like with images turned off in Outlook:

Look at those social icons throwing off the whole design! This is near the end of the newsletter, so it doesn’t pose too much of a readability problem, but think about what would happen if those were higher up in the email or surrounded by text. Not pretty.

Admittedly, setting the image height isn’t mandatory, but it’s a good idea to do so. In the case of Outlook, it will automatically apply a height to the image if width is specified.

However, it’s a good idea to specify a height to ensure the email renders as you intended it to, even if the client blocks images. If you don’t have a height attribute for your image, an email client could mess with the overall layout of your email. It’s another safeguard to guarantee picture-perfect rendering on every client.

Most of us know the infamous battle between Outlook and GIFs. They don’t get along.

If you’re not using conditional code to create an image fallback for your GIF, you’ll need to ensure that the first frame of your GIF gets your message across. Remember, Outlook only displays the first frame of the GIF.

If you’re using our image validation tool to QA your email, we’ll help you optimize your GIFs for Outlook clients. The tool will lay out each frame of your GIF and allow you to select which frame should appear first. Then, we’ll copy that frame and add it to the beginning of your GIF (we won’t remove it from its original place in the animation).

Meanwhile, you’ll be able to preview the animation as it will look in GIF-friendly email clients.

Checking your image attributes and your GIF animations may be routine, but sometimes routine steps can be forgotten when you’re busy building campaigns, managing strategy, designing, coding, and handling the 437 other tasks you’re faced as an email professional. Take the extra few minutes to do this image validation to ensure your message reaches every subscriber on every platform, so your hard work pays off! If you need help, we’re here for you.