Code Fix for Gmail Rendering Problems

Posted by Bryan Dreller on

Gmail recently implemented changes to its webmail environment that are adversely affecting how images are displayed in most browsers. We’ve created the below FAQ that describes the changes and some simple HTML code inclusions that will rectify these image display issues.

What changes did Gmail make?
With their recent webmail update, Gmail now adds a few pixels of horizontal white space when a certain style reference is omitted. This is especially noticeable for images that are stacked vertically (like image slices) or for images displayed on a non-white background.

How can it be fixed?
Easily! Add an in-line style reference to control the image display. Note: Gmail does not support cascading styles which are those referenced in the head or style tags at the top of the HTML. So, it must be in-line. Here is an example with the additional style inclusion bolded:

PROBLEM CODE:

img src=”http://www.someurl.com/images/image.jpg” height=”100″ width=”100″

CORRECT CODE:
img src=”http://www.someurl.com/images/image.jpg” height=”100″ width=”100″ style=”display:block”
Note: This style element can go elsewhere in the img src tag if preferred
What browsers are affected?

We have observed this rendering issue in FireFox, I.E. 8, and various Webkit browsers such as Chrome, Safari, and some mobile devices.

What else should I know about this?
The practice of declaring the display:block style for images is already a best practice because Windows Live webmail also adds this white space to images if you don’t declare this (again visible in FireFox and Webkit browsers). But remember, Gmail doesn’t support cascading style sheets, so this style—and all other style references—must be referenced in-line, like in the example above.

A tad more on the Webkit rendering engine…
Although Google Chrome and Safari are the biggest browsers using the Webkit rendering engine, it’s important to note that Webkit is an open source project which means it is used by any number of HTML rendering tools; not just popular web browsers. Other notables include desktop email clients like Apple Mail and Entourage 2008 (also Apple) and numerous mobile. See here for a comprehensive list of applications that use Webkit.


Popular this Month

 Video in Email: Is It Right For Your Business? (Part 1)

Video in Email: Is It Right For Your Business? (Part 1)

Video in email is nothing new. Marketers have been using some form of video...

Read More

 [New Research] Are These Hidden Metrics Harming Your Deliverability?

[New Research] Are These Hidden Metrics Harming Your Deliverability?

Reaching the inbox is not as simple as hitting send. Once a message is...

Read More

 What Job Is Your Subscriber Hiring Your Email To Do?

What Job Is Your Subscriber Hiring Your Email To Do?

Over the last 16 years, I’ve worked as a product manager, run product...

Read More

Author Image

About Bryan Dreller

Author Archive

Stay up to date

Enter your name and email address below to subscribe to our mailing list.

Your browser is out of date.
For a better Return Path experience, click a link below to get the latest version.