Creating Image Based Emails and Using Alternative Text and Slicing
January 29th, 2010 by Dan LukensMany email marketers choose to use image-based emails to create a seamless and professional look for their email campaigns despite the fact that quite a few email clients block images automatically. You can do this too, IF you know the right way to do it!
The main thing you have to accept when sending an image-based email campaign is that your images WILL get blocked by a majority of email clients. Your customers can choose to accept these images later, but on initial receipt the images will be blocked. If you understand that fact and its implications and you still want to use this tactic, by all means proceed.
When you decide to send an image-based email, a great way to ensure that your customers get your message, even when your images are blocked, is by including alternative text. Including alternative text for images is always a good practice but becomes especially important when there is no other content for your recipients to see. Alternate text will show up when an image is blocked so that your customer will at least be able to read a small part of your message. This text can assure them that the email is from a trusted source and they might be more likely to view the images after reading it.
With the Admail.net system it is extremely simple to provide alternative text for your images. All you need to do is include your alternative text in the “Image Description” when you add the image to your message in Email Builder. If you are going to use HTML code to construct your email, you probably already know that you can include alternative text through the “alt” tag included with your image.
Another way to keep your image-based emails manageable is to avoid using one large image file. It is more prudent to slice the image into several pieces and then construct the image out of these pieces. Why is this a commonly followed practice? For two reasons: Primarily because it makes the message more likely to be viewed. Several small files provide an opportunity to include more alternate text and it reduces the chance of tripping spam filters. Secondly, slicing allows you to make each individual section of your image a clickable link. Which means if you have one section that is your logo, you can make it a link to your website’s front page, and if you have a section that is a product, you can make it a link to a page for that product. Remember, image map code does not work in most email browsers. At Admail we encourage best practices like this, that is why our default image upload size is 40kbs or less per image.
Slicing an image is a fairly simple process that can be carried out by your company’s graphic designer or anyone who is competent with photo editing software. You can also do it online here: http://www.chami.com/html-kit/services/is/ When you use this tool make sure you uncheck the boxes that say enable links and mouse over effect unless you are an advance user. After making any changes on this page, including unchecking the boxes you must click the “process” button for the changes to take effect. Once you have made your changes, click download. You’ll be prompted to download a zip file which will contain your slices.
Now that you have a sliced piece of artwork that you would like to send, how do you turn it into an email? The best way to handle imaged-based email creation is to have an experienced website designer or someone very familiar with HTML create a simple layout and then import it into our system. Another possibility is to modify a template for your needs. Simply insert the images in the arrangement you would like them to be. We suggest that you use as few slices as possible to keep this manageable. Slicing the image in half is usually enough. Through our own testing we found that anything over four slices begins to get pretty complicated. In order to get images to lay flush against one another, you may need to change individual image alignment. When you have one image above another you’ll see that you’ll have a space between the two. Simply align the image on top with the alignment of “bottom”, you do this by click the image and then click the image button, you’ll then and this should solve your problem.
If you are unfamiliar with the more advanced editing features of Email Builder 2.0, we highly suggest that you experiment with the system. By right-clicking on the layout view of the template you can access a host of options that let your modify the template. You can copy sections and you can split them into additional columns. Padding changes can be made by right clicking and choosing the modify option in the drop down. After a little experimentation you should have a firm grasp on the layout editor, if not, you’re welcome to call us and we’ll be more than happy to walk you through it!