A few weeks ago, Gmail implemented some changes to their webmail environment that affects how images are displayed in FireFox, IE 8, Chrome, Safari and some mobile devices.  As I’m still getting tons of emails with images not rendering properly, I wanted to pass this information along so you can ensure that images in your emails continue to render properly in your recipients’ inboxes.

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?
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 in bold:

PROBLEM CODE:
imgXsrc=”http://www.someurl.com/images/image.jpg”Xheight=”100″Xwidth=”100″

CORRECT CODE:
imgXsrc=”http://www.someurl.com/images/image.jpg”Xheight=”100″ width=”100″Xstyle=”display:block”

Note: This style element can go elsewhere in the img src tag if preferred

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.

I hope that helps some of you!