Are pictures not showing up in Gmail for your online campaigns?
Want to know how to fix the issue of pictures not showing up in Gmail for your campaigns? Of course you do. Our customer care team has fielded a few calls about this issue and we want to get the word out on a quick fix.
Gmail recently implemented changes to its webmail environment that are affecting how images are displayed in most web browsers. There are simple changes you can make in your HTML code that will fix these image display issues. Don't worry if the mention of HTML code worries you. This is a pretty easy fix as long as you know where to make the changes.
First up, what changes did Gmail make to cause this issue? Well, since their last webmail update, Gmail now adds a few pixels of horizontal white space when a certain style reference is left out. This is especially noticeable for images that are stacked vertically or for images displayed on a non-white background.
To fix it all you need to do is add an in-line style reference to control the image display. The reason why it must be in-line is Gmail does not support cascading styles which are referenced in the head or style tags at the top of the HTML.
Not really sure what that all means? Don't worry, here is an example with the additional style inclusion in bold:
Incorrect Code: img src=https://www.yoururl.com/images/image.jpg height="400" width="400"Correct Code: img src="https://www.yoururl.com/images/image.jpg" height="400" width="400" style="display:block"
Just in case you are wondering, this style element does not have to go at the end like in the example and can go elsewhere in the img src tag if you prefer.
Known browsers that have this rendering issue with pictures not showing up in Gmail are FireFox, IE 8, Chrome, Safari, and various mobile devices.
Adding the display:block style for images is already a best practice that you should be doing because Windows Live webmail also adds this white space to images if you don't declare it. The difference like mentioned above is 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.
We hope this helps fix any issues with pictures not showing up in Gmail for your online campaign. Seeing your beautiful campaign not displaying properly in a certain browser can be a real bummer. That is why you always need to test, test, test and of course implement any quick fixes like the code provided today.
Have another question concerning your online campaign? Check out our online FAQ where you will find answers to hundreds of SimplyCast related questions.