If you are sending your monthly email newsletter in HTML format, this opens the door to create stunning looking campaigns rich in images. With skilled graphic designers, the temptation is to create stunning very image heavy email newsletters.

Don’t get us wrong, there is nothing wrong with using images inside your HTML email, however the use of images inside can have negative implications with your email marketing campaigns (if not used correctly).

Over the years we have seen many people (normally graphic designers who are fairly new to email design) making classic mistakes when it comes to adding images which have destroyed the success of a campaign.

To help you establish a successful email marketing campaign which incorporates the use of images, we have decided to put together this tips sheet. We hope that this acts as a useful tool.

Sending a campaign which is 100% image based

As an email marketeer, you should never broadcast a campaign which only contains images. The use of images inside an HTML email should always be balanced out with rich content text.

Over the last few years, anti spam filters have evolved greatly. Traditionally spammers could pass many filters even if their emails contained common spam words. Spam filters caught on to this, so as a solution spammers started broadcasting emails which were 100% image based – in an attempt to trick filters, spammers carried on using spammy words but hiding them inside large images. Most modern anti spam filters will now stop this. Unless the email campaign contains some real content, it could be considered spam.

As a result of this evolution, broadcasting a campaign which is 100% image based will never be a success. Our advice is that you should always heavily balance the use of images which content rich text.

Addition: While writing the post i received a marketing email from a very well known online retailer. This newsletter was 100% image based. Apple mail classed this email as junk.

Keep image pixel sizes down

Inside your email newsletter you should always avoid the use of very large images. So that your email newsletter displays correctly inside most email readers, we suggest keeping the overall width of your layout limited to 600px. Simply from a design point of view, no images should be wider than 600px.

Our suggestion is that 600px wide is still to large for an image inside your email campaign. Many spam filters, such as SpamAssasin will penalise you for using excessively large images. In research for this article we sent an image 600px wide – our own internal spam filter scored us for this.

So what is the biggest size image you should send? There are no clear rules on this.  An external email marketing advice page suggests that no image should be larger than 470px x 150px in size. While this could be seen as quite a small cap, deliverability is always the main concern  – we would be included to agree with this suggestion.

Always optimise your images

If you come from a web design background, you are more than likely already aware of the reasons why all images used on a website should be optimised. The same principle applies for your email newsletter.

The recipients of your email newsletter don’t want to be sitting waiting for a 6mb picture to download – believe us, we have seen it!

As an email marketeer, ensure that all your images are optimised for web. Keep your file sizes as small as possible. One email marketing blog suggests that no images should be more than 25kb in size – we would argue that this is a little strict, as a rule of thumb keep your images under 80kb (we have fast servers that can cope!).

Regarding image file seizes there is another school of thought. If you are storing your images on one of our servers, our network runs at 1gbps – so why should you limit your image sizes? A 6mb file is a fraction of our transfer capacity. In addition, with the growth of fire-optic broadband in the UK, home and office broadband speeds are on the incase.

While broadband speeds are on the increase, the average internet speeds in the UK is still only 2mbps – also if your recipient is reading your email on a mobile phone 2G network, a bulky image would take forever and a day to load.

Always set the image size in your HTML code

By default, many email readers will block images loading when your email newsletter is first opened. Popular email readers such as outlook will instead give the recipient an alert that this email contains images – asking permission to load the images.

If images are blocked by default along with not displaying content inside your images – blocked images can also have an impact on your surrounding content.

As an example, you have a 300px x 150px image inside your layout and content text fitting nicely next to the image – if the image is blocked and you have not hard coded the image size, this could ruin you any text formatting. The email reader will not know the image size any may just display a standard image icon which is substantially smaller than the true image. Therefore text which was before nicely sitting next to your 300px x 150px image may loose formatting and look different as your text is now wrapped around a much smaller image icon.

As a solution you should always set the HTML code for your image to specify the true image size:

HTML image code with size set:
<img src=”/my/image.jpg” width=”300” height=”150”>

HTML image code without size set: (do not use)

<img src=”/my/image.jpg”>

Always use ATL tags

All images inside your email newsletter should include the use of Alt tags. If you are fairly new to web design and email design – an Alt tag is a little bit of code included within your image HTML code tag that acts as a description.

If all images inside your email newsletter are loaded by default, the recipient may not notice your Alt tags – therefore it could be suggested that they are not needed.

As previously stated, some email readers will block images by default – when this happens, the use of Alt tags will suddenly become very important. If images are blocked, inside the default email reader, an image blocked icon will appear with the Alt tag displaying – to inform the recipient what the image is.

Without the use of Alt tags, the recipient will not be aware of the content of these images – so why should they download them? With Alt tags, you can quickly and clearly inform the recipient about the content of each image before the image is loaded – this will hopefully tempt them to read your email in full and load all images.