Guide to a Better HTML Email Design - Images in HTML

You can use as many images in an email message as you wish – the right number depends on the purpose, type and focus of the email. For instance, e-commerce emails often have more images than promotional emails.

Consider using graphic images and buttons to draw a reader’s attention. These images can convey concepts in combination with your copy. Make sure your call-to-action is not only supported by an image but also by text. This way, if the images are turned off, the call-to-action is still clear.

Images for emails should be hosted on a Website and not embedded within the email to ensure proper rendering and to minimize the email’s file size.

Make sure that the alt tags are properly described in text. If the images are suppressed, the recipients still get to see the description in text.

Important note:

Define the size and parameters (horizontal and vertical height in pixels) of each graphic in the tags.

For example:

Email Marketing Best Practices: Use of Style Sheets in Email Newsletter

Many Web designers use Cascading Style Sheets (CSS) to simplify the coding process and ensure a consistent style throughout a Website. Use of CSS in HTML emails can be problematic, however, as many email clients will not render style sheets correctly.

Here is a handy reference on whether an email client renders certain types of style sheets correctly.



Avoid using CSS if possible; but if you must use them, choose the embedded styles also known as ‘inline’. Embed the style within the two container tags and not within the header because some email clients will truncate or strip out the header.

So, add the style within the body tags, like this:

Main Text