This article is part of a series on the use of HTML for email marketing. Today we will see how to control images.

If you use the regular Cyberimpact editor, you should not have much difficulty with the images. Inserting an image with the expert editor is another story…

Disclaimer: This article is rather long and can be considered a bit technical. However, it contains solutions to many common problems. Feel free to save it and come back if you have difficulties with your model!

Summary:

  • HTML 101 – The basics
  • HTML 101 – Text formatting
  • HTML 101 – Images (you are here!)

How to insert an image

The <img> tag allows to insert an image. It is recommended to avoid background images in HTML email. The src attribute specifies where to find the image file. If you wish to host it elsewhere than on Cyberimpact, make sure to use absolute URLs (which contain the full path to the image). The alt attribute sets the alternate text to display if the image is not available.

For example:

<img src=”http://www.mywebsite.com/images/base-templates/placeholder176x141.gif” alt=”Alternate text” border=”0″ width=”176″ height=”141″ />

Supported formats

Supported formats in HTML emails are: jpg, gif and png (PNG8 or PNG24). Beware of animated gifs: they work sometimes, but not in recent versions of Outlook, which will only show the first frame of the animation.

Borders

Unless you want to have borders around all your images, always add the attribute border=”0″ to your img tags. Or the equivalent CSS: style=”border:0;”. This way, if you add a link, you won’t see an undesirable blue border appearing around the image.

Problem: stretched images

This is often because of the width and height attributes.

For example:

email html

This image is 176 pixels wide by 141 high. However, in HTML, it is forced to 300 pixels wide by 141 high. Since the dimensions do not meet the original ratio, the image will appear stretched. If we force its width to 50 pixels, then it will look contracted.

Did you know that setting only the width or height attribute (but not both) ensures that the other dimension will automatically adjust while keeping the ratio?

Problem: pixelated images

Another common problem with the width and height attributes is the pixelation of images. If you force a small image to appear larger, you can not invent the missing pixels so it will lose quality. The image compensates by cloning existing pixels and will look blurred or “staircase”.

Here, for example, a piece of the previous image enlarged disproportionately:

html imagesIf, instead, we force a very large image to appear smaller, the quality will seem unaffected unless it contains text (in which case the readability will be reduced). However, it will be unnecessarily long to download and in some versions of Outlook, it could cause other types of problems (eg when transferring the message).

Aligning images

There are two methods for aligning images: with the align attribute or the CSS text-align and vertical-align properties. Here are the most frequently used values ​​for each of the two methods:

  • With align: left, right, top, middle, baseline, bottom
  • With text-align: left, center, right
  • With vertical-align: top, middle, baseline, bottom

Strangely, the align attribute does not offer the center value… And if you were wondering: float and HTML emails do not mix…

If you have strange white lines between the rows of your tables (especially in Hotmail and Gmail), try adding the property style=”display:block;” on each of your image tags.

The last word

It is the end of this serie of articles on the code behind HTML emails.

Give us your feedback: would you like more technical articles like these?

For any suggestions on future articles, please do not hesitate to contact us at the following address: suggestions@cyberimpact.com

The Cyberimpact team