Gmail Image Rendering Issue
Normally, we find ourselves worrying over Microsoft Outlook using "Word" to render HTML emails correctly, but over the last few weeks we've been busy updating our clients' email templates for Gmail. With their latest webmail update, Gmail caught the email marketing industry by surprise. We've noticed problems with the rendering of emails from large companies like REI (see the example at right), and even with some professional ESP's emails such as Lyris. Here's a quick breakdown of the email rendering issue, and how to resolve it.
What's the Problem?
The problem lies in the way that Gmail (and Hotmail) renders images in any HTML email. You might have noticed a few pixels of horizontal space being added under every image– an issue that is very noticeable with emails that are very image heavy. You'll also notice it with images in a table cell that has a different background color.
What's the Fix?
Simply add ( style="display:block" ) to the <img> tag! But how? Of course, it's best practice to style everything with in-line. So unfortunately, this has to be applied to every image. Below is an example of how it will look in the HTML code when applied to an image tag. If you're working in a HTML editor like Dreamweaver, it can align the image a little funny but when you preview it the image is aligned correctly.
Example: <img src="http://www.bluetentmarketing.com/images/logo.jpg" style="display:block" />
We'll be assisting our email marketing clients that run their own email marketing programs with pre-built templates that cannot implement the fix on their own. For those using a "Do it Yourself" platform like Constant Contact or Vertical Response, be sure to test thoroughly and ask for assistance if needed. Otherwsie, if you have questions or would to discuss email marketing solutions for your company or organization, please don't hesitate to contact us today.
- Ryan Austin
Director of Email Marketing