Gmail implemented some changes to their webmail environment a few HTML email gmail ago that affect how images are displayed in FireFox, IE 8, Chrome, Safari and some mobile devices. You can ensure that images in your emails continue to render properly in your recipients’ inboxes.
What are the changes that Gmail made? Gmail now adds a few pixels of horizontal white space when a certain style reference is omitted, with their recent webmail update. 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 in bold below:
imgXsrc=” someurl.com/images/image.jpg ” Xheight=”100″Xwidth=”100″
imgXsrc=” someurl.com/images/image.jpg ” Xheight=”100″ width=”100″X
Note: This style element can go elsewhere in the img src tag if preferred
What else should I know about this? Gmail doesn’t support cascading style sheets, so this style-and all other style references-must be referenced in-line, like in the example. 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).