Solutions for image related problems
There are various image related problems that you might encounter when creating an HTML email and the most common of them has to do with gaps, borders around images and setting the background to a table or a table data cell.
First of all, all of your image tags should have the following basic code:
<img scr=”” height=”” width=”” alt=”displays if images are turned off in email software” style=”border:none;display:block;”>
Most of the problems occur when the display is not set to block(in the case of Hotmail) or the border is not set to none(in the case of Outlook). In addition, you may want to style your image tags to have the margins and paddings set to 0.
Another image related problem that has to do with gaps, involves older email software versions. They usually open a gap if </td> is on a new line. The solution is to bring it up on a the same line, the same string of code that begins with <td...>
<td valign=”top” align=”left” width=””><img scr=”” style=”border:none;display:block;” alt=”” /></td>
The third image related problem has to do with background images and various email delivery services offer various solutions. The main problem is that Gmail, Outlook and Outlook will not display background images so you will have to do a little bit of a work around.
For Outlook, you need to add VML code before the content and close it off after the content. But the most important aspect of the VML code is to put the source of the background image correct and to specify the two instances of height and the two instances of width which need to match the height and width value for the table data cell and for the image. If you are careful, this approach will display background image in Outlook and Gmail. Besides, some image related problems within an HTML email often can be identified when you set the HTML border to 1