image

Where have all the images gone?

More and more email programs are blocking images. If the layout of your email depends on the placement of certain images, then the look-and-feel of your email can be seriously compromised.

So what can be done?

Get Rid of Unneeded Images
For a long time, web pages and emails were laid out with blank images padding the edges of every element, small images rounding out the corners, and headers built of large banners. Get rid of them! When images are blocked on an email like this, the results are disastrous.

Instead, take a look at Cascading Style Sheets (CSS). Using CSS, you can dictate padding, margins, colors and layout without using extra images, replace your headers with a large font and the appropriate color scheme, and create mailings that are easily altered for special events.

By utilizing CSS, your e-mails will degrade gracefully in that they will still look proper, even if images are blocked. If a particular e-mail program doesn't support CSS, the end result is still readable and sensible.

Define the Required Images
Some images are more important, like company logos and pictures of events. These images help give identity to your email and perhaps contain a part of the content as well, so how can the effects of blocked images be minimized?

To start with, declare a height and width for each image. This can be done through CSS or standard height and width declarations. By having the size declared, the layout of the email won't collapse when the image isn't present.

Also, provide an 'alt' tag for your images. The 'alt' tag is supposed to describe what the image is, and many e-mail programs will display the content when the image is blocked.

Finally, make a decision about borders on your images. If you want borders, declare them, if not, declare that there should be no borders. When there is no given answer, an e-mail program will decide on its own to include borders or not.

Here is an example of a well formed image tag-

<img src="http://example.com/images/myimage.jpg" style="height: 100px; width: 50px; border: 0px;" alt="What you may have missed at the office party!" />

Rather than let your emails fall apart, use these tips to keep everything looking clean and neat, even in the worst of circumstances.

search term: