Join Tim Slavin for an in-depth discussion in this video Solving image problems, part of Effective HTML Email and Newsletters.
- View Offline
This video shows common image-related problems that you might encounter as you code and test your HTML email, along with solutions. The most common image-related problems that you will see have to do with gaps, borders around images, and setting the background to a table or table data cell. Let's talk about each of those. First of all, of your image tags should have this basic code. In addition to the source, obviously, which should be an absolute URL to a specific image on a web server somewhere on the Internet, you also should specify the height and width, as well as the alt tag. The alt tag will display if images are turned off.
In terms of image-gap problems you want these styles at a minimum. You want display set to block for Hotmail, and you want borders set to none for Outlook. The borders set to none will also solve the problems related to Outlook showing borders around all images regardless. In addition, you may want to style your image tags to have the margins and padding set to zero, and don't use shorthand--you'll need to specify margin-top, padding-top, etc.
Another image-related problem that has to do with gaps involves older email software. In old versions of Lotus Notes email, for example, you may find a gap underneath the image tag. Sometimes this is caused by the table data cell being on a new line. The solution is to bring everything up into a single line, like this. The third-image related problem has to do with background images.
This solution that I will show you is from the Campaign Monitor blog, and the URLs are in the exercise files. The main problem with background images is the Gmail and Outlook 2007 and Outlook 2010 will not display background images. You have to do a little bit of a workaround. For Outlook, you need to add VML code, which is this block of code, and you put it before the content and you put it after the content to close off their VML tag.
The most important aspect of the VML code is to get the source of the background image correct and to specify the two instances of height and the two instances of width, and those height and width values 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 images in Outlook 2007, Outlook 2010, and Gmail.
Some image-related problems within HTML email often can be identified easily when you set the HTML table border to 1. This will let you x-ray your table rows and columns to find any gaps. These are the most common solutions to image problems that you may find while testing HTML email code.
- Understanding MIME types
- Reducing spam potential in an email or email list
- Creating content for email campaigns
- Understanding the design constraints of HTML emails
- Building email address lists
- Understanding the ideal coding process
- Designing a plain text email from an HTML email
- Deciding how and when to test an email
- Sending email with canned templates
- Troubleshooting layout, spacing, and image issues
- Adding video to email