Email Image Linking

A Guide to the Latest Image Linking Techniques

GUIDE

IMPORTANT: Several of the images in this ebook require a color ereader or tablet to be viewed properly.

This white paper is published by:

Goolara, LLC

2150 Mariner Square Drive, Suite 100

Alameda, CA 94501

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2014 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved.

www.goolara.com

INTRODUCTION

IN our recent white paper, Using Text and Images, we talked about the best ways to combine text and images in email to yield better deliverability results and greater customer engagement. Most of the information in that white paper dealt with combining sections of an image with text cells to provide better deliverability, but this only scratched the surface of the subject.

Linking images to text is easy enough, but sometimes you might want to link different parts of an image to different landing pages. Some common examples of this include:

• Various departments in a store

• Different items for sale

• Separate links to measure click responses

• Coupons and special offers

The preferred method of accomplishing this is the use of sliced images. Slicing is the technique of cutting an image into smaller pieces and then assembling these pieces using a table in the body of the email. Each sliced section of an image is placed in a separate cell and each section can be given its own link and alt tag information. Although these segments are only portions of a complete image, the email treats them as separate images with all the advantages and disadvantages that this entails.

The alternative is Image Mapping. With this technique, individual shapes are added to a coordinate-based overlay map of the image. This map is invisible, but anytime the cursor hovers over one of these shapes, the unique link and alt information for that shape is displayed. The image remains intact and is downloaded all at once. Image maps are often rectangular for the sake of simplicity, but they are based on coordinate points, so they can be ovals and complex polygons as well.

There are various ways to slice images or create image maps. For all the examples in this guide, we will be using Adobe Photoshop and Dreamweaver, and the instructions will be specific to those programs. Although these are the most common programs for this type of work, there are plenty of other tools you can use to accomplish everything discussed here (see Appendix D: Image Manipulation Software).

IMAGE SLICING REVIEWED

IN the email marketing field, image slicing is, by far, the most common method of creating several linkable areas within one image. When used correctly, slicing is a great way to add external elements to an image. Because it is based on standard table attributes, it is compatible with more devices and platforms than image mapping, and there are times when image slicing is unquestionably the best approach. Here are the main ones:

Combining Text and Images

The best use of sliced images is to combine images and text in the same area. A block of text that is inserted into an image can be very effective and still gives you the advantages of a good text-to-image ratio that an image-only combination of text and graphics can’t achieve. This was discussed in detail in the Using Text and Image white paper, below is an example of this in practice.

In the original, all of the small colored boxes of text were rendered as actual text. The image was sliced in such a way as to allow for these portions of the image to be replaced with text cells. These cells were then colored with 25% color values of the coats behind them. This allows for a pleasing “ghosting” effect with the text blocks and ensures that the explanatory information is visible when the images are blocked.

Adding Barcodes

Using sliced images, it is possible to insert dynamic information such as barcodes, discount codes, or user-specific passwords into an image. Stores, restaurants, or any service that offers discount coupons can use this technique to nest these coupons within an image.

In the example above, the words, “use this coupon” are pink text in a black cell. All the cells except the barcode cell have black backgrounds. The cell with the words “15% Off” incorporated into the image uses a styled alt tag to make its text visible. (see Using Text and Images white paper for more information on how to create styled alt tags). Additionally, the barcode is dynamic, allowing for a unique coupon to be inserted into each email.

Inserting Animation

Animated GIFs can add visual interest to any email. They are especially popular during the holiday season, where you will often see them used to create blinking lights on a Christmas tree, or to make snowflakes drift across a logo. In the example below, the face of the clock is a separate animated gif that is replaces the original clock face in the jpeg. The clock face was replicated with twelve different positions for the second hand in the gif to create a spinning clock effect.

If you plan to use animated gifs in your mailings, it is important to remember that some email viewers will only show the first frame, so make sure that this frame contains your primary message. A good example is the one shown below from by Bed, Bath & Beyond. The gif appeared at the top of several of their emails and features a tiny truck pulling the banner across the page. Bed, Bath & Beyond first shows the last frame (shown below) and then the animation follows. If they did not do this, those who view the email on a browser of software that doesn’t support animated gifs would only see the very tip of the truck at the beginning of the animation, and would miss the enticement of the free shipping offer.

Areas With Limited Palettes

Another reason for using sliced image is to decrease the size of the image requirements when portions of the image contain a limited palette. These areas can be saved using indexed colors in either a GIF or a PNG format. In the example shown below, the green and gold name panel in the upper left of the image was saved as a separate gif file, while the rest of the image was saved as a jpeg, reducing overall size of the element by almost one third.

Stepped Information in the Alt Tags

This approach is particularly useful with infographics or similar images that contain individual or stepped blocks of information. In the examples below, we see this technique used with an infographic that has been cut into segments and placed in a table. Here is the infographic as it appears when images are displayed:

And below is the table as it displays when the images are turned off. We’ve added several bright colors to the cells to demonstrate that an email can have a strong visual quality even when the images are blocked (this might not be viewable on grayscale devices). Normally, however, you would choose cell colors that reflect the colors in the graphic.

Sharply Defined Areas

Sliced images might be a good choice for images where the individual elements in an image are laid out in distinctly separate areas. Here is an image in an email from Godiva Chocolate:

There is a clear division between the various chocolates, making it easy to slice the image. And here is the email with the image boxes as it appears when the images are blocked:

Godiva has done a good job of adding the text in the image to the alt tags, which is better than no text at all, but a better alternative would have been to replace the text below each truffle with actual text. In this way, the could have been sure that the text was visible across all browsers and email viewers.

THE DOWNSIDE TO IMAGE SLICING

BUT for every good reason to use sliced images, there are other good reasons to avoid them. Many of the reasons often given for using sliced images are incorrect at best, and counterproductive at worst. In some cases, this comes from a lack of understanding about how email actually works, while at other times it is a result of not staying abreast of the changes to email clients and browser capabilities. In this chapter we will look at the myths surrounding image slicing and why it is often not the best procedure.

Slicing and Deliverability

Some people will tell you that sliced images improve deliverability, but about the only time this argument has any weight at all (and very little at that) is if you’re in the habit of sending out email containing nothing but one big image with a link attached. Already, this is a bad practice. A sliced image might provide more opportunities to add alt text, but that will help your text-to-image score very little, and you shouldn’t be relying on alt text to carry your primary message anyway. As long as your email contains roughly the same amount of text as images, the fact that the image is one piece or a dozen should make no difference (for more information on text-to-image ratios, see our Deliverability Enhanced white paper).

Slicing and Speed

Another reason sometimes given is that it speeds up image display. The thinking here is that email client can load the little pieces at the same time instead of waiting for one big image. In truth, that’s not how email clients work. They limit their queries to a few requests at a time, and then wait for those to finish before moving on to more. One image requires one request. Twenty-two slices require twenty-two requests. In other words, a sliced image will, if anything, slow down the image loading process.

Image Alignment

The biggest detriment to sliced images is the problem of alignment. For the image to work, all the little pieces need to line up perfectly. Sometimes one missing or misaligned image can ruin everything. We’ve all received email that looks like this:

Or this:

Or this:

If you are using a sliced image, care must be taken to add style=”display: block;” to each of the img tags. Miss even one, and the entire image can fall apart. Even with the “display:block” command, images in tables can sometimes seem to take on a life of their own, especially when viewed in different browsers. In the third example, the designer chose to avoid tables completely and used div tags instead, probably in an attempt to follow the preferred structures for web pages (but not for email). It may have looked fine on their 19” monitor, and the problem only came to light when someone opened it on a 27” monitor. Needless to say, anytime you are working with a sliced image in a table, you should try and view the finished results across as many platforms as possible.

Slicing and Linking

If the email designer relies too heavily on image slicing to create linkable areas, it can lead to needlessly complex image tables. This is especially true when the image has oblique or irregularly shaped areas that need linking. The image below is an example of an email that uses oblique type within the image:

And here is how they chose to slice the image.

The stair-stepped image sections in the center of the image are the result of the designer’s attempts to link “Women,” “Men,” “Girls,” and “Boys” to different landing pages. It is, by no means a perfect solution. In the next chapter we’ll look at the image mapping alternative to this method.

IMAGE MAPPING REVIEWED

WITH image mapping, the need for slicing is eliminated. The links are specified in shapes that overlay the image. These shapes are invisible but will respond to mouse clicks. Best of all, they are part of a page’s basic HTML, so that even before the images are loaded, the image maps are active.

Let’s look again at the last example from the previous chapter, this time with image maps added (the image maps are highlighted to make them visible):

As you can see, it is considerably less complicated, and it only uses 14 lines of code to accomplish the same thing as the complicated table used in the previous version. It is also considerably faster. Compare drawing and adjusting a few boxes to slicing and saving the pieces, then creating a table, merging various rows and columns to make things fit correctly, and then adding the display-block attributes to all the cells.

Here’s another example that also demonstrates the advantages of image mapping over slicing. This example comes from Banana Republic. First, here is the hero image:

And this is how they sliced it up:

The reason for this complexity? So that anytime someone clicked on any part of the man it would take them to the Men’s Department, while clicking on the woman takes them to the Women’s Department. They also wanted the text in the upper left to go to various departments and the background to go to the home page. The following graphic shows how the various sections were linked (color ereader required):

Image Slice Link Map

Green = Home Page

Pink = Women’s Department

Blue = Men’s Department

This approach leaves us with 22 images that need placement, multiple complex merged cells, and 122 lines of code. Now, let’s see what happens when we use an image map instead. Here’s that same image in one piece with image maps (image maps highlighted for instruction purposes):

The link in the base image is set to the home page, as is the “Bright New Arrivals” text at the top and “shop now.” The man and woman and the department titles link to their appropriate pages. Using an image map reduces the code for this image to 12 lines, not to mention far fewer opportunities for things to go wrong.

Image Size and Loading Issues

Sometimes people slice images because they think that a sliced image is going to load faster and have fewer problems than one big image. There is also the perception that with smaller images, the email clients are less likely to perceive the mailing as spam.

As we discussed in the previous chapter, this may be true if you’ve converted all your text into images, but you shouldn’t be doing this anyway. Any text in your mailings, with the exception of your logo and intentionally manipulated type, should appear as text (for more on this subject see our white paper Using Text and Image).

As for the belief that a large single image is going to cause problems loading, whereas several smaller pieces won’t, if your images are big enough to have problems loading, they are probably bigger than they should be. You would be better advised to reduce the size of these images in Photoshop or use an image compression tool such as RIOT, which does a good job of dramatically reducing file sizes without much quality deterioration. As a rule, if an image is big enough to have problems loading, it’s bigger than it should be.

If you plan to use image maps, we recommend the following as practices to ensure maximum compatibility:

Always assign a link to the base image

As the chart on the next page shows, these base links sometimes disappear after the image is loaded, but they do help provide links in email clients where the image is blocked.

Don’t get carried away

There’s not much sense in creating several complex polygons in an image map if all the links go to the same page. You’d be better off simply applying a link to the base image and forgo slicing and images mapping entirely.

Provide alt information for the image maps

Just like images, image maps can include their own alt tags. By including these, you will make it easier for your clients to know what they are clicking on and where it will take them. So go ahead and use those image maps.

“Don’t use image maps,” one website states bluntly. “They are not fully supported across all email clients.” While there may have been some merit to this argument a few years ago, today, image maps work in most environments. There are exceptions, of course, and a few idiosyncrasies in the different browsers. In Internet Explorer, the link in the <a> tag is disabled after the image is loaded. Only the image map links are clickable. The background image, however, will still respond to right clicks and show its alt tag information when the mouse hovers over it. In some cases, the empty image box of a blocked image is still clickable, but the image maps may not be. The chart above shows how various email clients react to image maps when viewed on the desktop.

Smartphone Issues

Smartphones, however, are another matter. Right now, this is the biggest problem with image maps. If you know that a portion of your audience is reading your mailings on their phones, you actually may want to opt for slicing instead of image maps. In the next chapter we’ll discuss why.

THE DOWNSIDE TO IMAGE MAPPING

RECENT reports claim that 65% of all email is now opened on a mobile device. Although all the major email clients now recognize image maps, a technology is only as useful as the least compatible component, and right now, that component is the phone, or, more specifically, older Android phones.

Those carefully constructed image maps do some interesting things on mobile devices, and not all of it is good news. We won’t say you should absolutely never use image maps. We still think they are an efficient way to create links in an email. But at this time, sliced images are safer in most cases, as they are less likely to have linking problems than image maps.

To understand what happens to image maps when they are viewed on mobile devices, we’ll use the following image (color ereader required):

The image is a 600 pixel by 800 pixel grid consisting of twelve colored squares. Over the top of it we’ve placed an image map that links each square to a web page of the corresponding color, making it very easy to see if each square is correctly linked. Clicking on the magenta square, for instance, takes you to the magenta web page, while clicking on the green square takes you to a green web page. We tested this grid in various sizes to see if size was a factor with image maps. What we found was that size was less important than the HTML technique used to construct the email. Even then, image maps did exhibit some unusual behaviors.

Image Maps and the iPhone

In our tests with iPhone, we found that image maps work, but only as long as the image is contained in a table. Placed on its own in the email, or in <div> or <p> tags, the image map does not shrink to fit the screen the way the image does, so the mapped points no longer match up. In fact, the grid appears to be exactly twice the size of the image on the screen.This means that when you click any of the four squares in the upper left corner (blue, magenta, red, and black) you’ll go to the blue page, while the gray and cyan squares on the upper right link to the magenta page. It is impossible to go to the white or cyan pages because the links for those pages are off the edge of the iPhone.

Just to be safe, we tested this a number of different ways, using tables and divs with different attributes and size specifications. What we found was that image maps always worked when contained in tables, but only when contained in tables.

Android and Image Maps

Whereas putting the image in a table alleviates any mapping issues on the iPhone, the same cannot be said for Android phones. To make matters worse, the problem for Android phones is almost the exact opposite of that experienced with the iPhone. Instead of the image map not sizing down to fit the screen, it actually sizes down below the image size. If that weren’t enough, it also uses the correct image map coordinates underneath the smaller map. As a result, tapping on the blue square in the upper left corner of the grid will take you to one of four different pages depending on where you tap it, while tapping on any of the bottom three colors or the four colors to the right will take you to the correct links for those colors because they are outside of the area affected by the shrunken image map overlay.

Unlike the iPhone, placing the image in a table does not fix the problem; nor will divs fix the problem either. This issue appears to have been fixed with the more recent versions to the Android OS, but there are still plenty of phones out there using older Android versions. If a segment of your audience uses Android phones, you are better off avoiding image maps for now.

The Shape of Things to Come

The biggest impediment to using image maps at this time is their behavior on older Android phones. In our tests, Desktop and laptop computers posed no problems for the image maps, nor did iPhones and iPads as long as the image is placed in a table. Android phones running System 4.3 and above also worked fine. Of course, it’s an understatement to say that mobile technology is constantly changing. Even while we were putting this article together, Samsung announced the a new phone using their Tizen operating system, and Amazon is planning to release their own phone later this month. How these new environments will respond to image maps (or anything else in email) remains to be seen.

APPENDIX A: IMAGE SLICING WITH PHOTOSHOP

IMAGE slicing is one of the most fundamental tools in any email designer’s arsenal. By far the most popular tool for slicing an image is Adobe Photoshop. Before starting, it is a good idea to define the areas that you want to slice using the guides. In the example below, we are creating a section in which we will place a dynamic barcode. The placement of the top and left guides was done visually, while the bottom and left guides were dragged over to create a rectangle that is 3.25” horizontally, and .75” vertically.

Select the Slice Tool. In some versions of Photoshop, this tool is found under the Crop Tool selection.

Drag the Slice Tool over the area that is defined by the guides to create the section that will contain the barcode.

At this point, however, the top section runs the entire length of the image. We want to cut this section in half so that we can replace the upper right portion with a text box. This will create a sliced image with five parts.

Now that we have the sectioning we require, Go to the File Menu and select “Save for Web.” The Save for Web dialog window appears.

At this point, you have the option of saving each of the sections using a different format. In this case, we are saving all five sections in the JPEG format. Click Save. The ‘Save optimized As...’ window appears. You have the option of saving the image by itself, but that means you will have to create the table from scratch. Click on the Format pop-up menu and choose ‘HTML and Images.’ Click Save. The Save Window appears.

By choosing “HTML and Images,” Photoshop will automatically create the table for you, but you will still need to modify it for the best results. Since we are removing the contents from two of the cells, the height and width information for those images must be added to the <td> tags. We’ve also added a styled alt tag to make the alt text in the first section (“15% OFF”) stand out from the black background. This is only necessary if you’ve added color values to the cells. And last, we’ve added “display:block” to the cells containing images. In this particular example, it wouldn’t matter that much, but it is good habit to get into.

Here is what the HTML code for the table looks like when it is finished:

<table id=”Table_01” width=”849” height=”565” border=”0” cellpadding=”0” cellspacing=”0”>

<tr>

<td rowspan=”3” bgcolor=”#000000”>

<img style=”color: #f7b8ca; font-family: Georgia; font-size: 36px; display: block;” src=”images/modelinfur_01.jpg” width=”550” height=”565” alt=”15% OFF”></td>

<td width=”299” height=”100” colspan=”2” valign=”bottom” bgcolor=”#000000” style=”color: #f7b8ca; font-family: Georgia, ‘Times New Roman’, Times, serif; font-weight: bold; font-size: 24px;”><p>Use this coupon:</p></td>

</tr>

<tr>

<td width=”232” height=”80”>&nbsp;</td>

<td rowspan=”2” bgcolor=”#000000”>

<img style=”display: block;” src=”images/modelinfur_04.jpg” width=”67” height=”465” alt=””></td>

</tr>

<tr>

<td bgcolor=”#000000”>

<img style=”display: block;” src=”images/modelinfur_05.jpg” width=”232” height=”385” alt=””></td>

</tr>

</table>

APPENDIX B: HOW TO CREATE AN IMAGE MAP IN DREAMWEAVER

ALTHOUGH it is possible to create image maps from within the WYSIWYG editors in many email marketing systems, it is easier to create them using external HTML editing software. The most popular of these is Adobe Dreamweaver. Here are some simple examples of how to use Dreamweaver to create image maps.

Before you begin, you need to make sure that the ‘Properties’ window is displayed at the bottom of the page. If it is not, click on ‘Window’ in the top menu and select ‘Properties,’ or press Control + F3.

Once you’ve laid out your email with the images in place, click on the image you want to add an image map to.

At the bottom lower right of the Properties window, the Map tools should appear in the lower half of the Properties window. In Dreamweaver, the clickable areas are referred to as “Hotspots.”

Dreamweaver’s image map feature lets you create one of three types of image map shapes (from left to right):

• Rectangles (or squares)

• Ovals (or circles)

• Polygons

The rectangle tool is the most basic and should be used to surround rectangular objects or blocks of type. To use it, select the rectangle tool and click and drag it across the area you want to map.

The oval tool is less useful. It should be used for round shapes or circular target areas. To use it, select the rectangle tool and click and drag it across the area you want to map.

The polygon tool is useful for mapping irregular shapes. It is also useful for creating rectangular shapes at an angle. To use this tool, click around the outside edges of the image you want to map until the area is completely enclosed.

To move or adjust the shape of any of the map objects after they are created, use the cursor tool (Pointer Hotspot Tool) to the left of the shape tool icons.

APPENDIX C: THE ABCS OF FILE FORMATS

BEFORE we start examining the image linking techniques discussed here, it is a good idea to have some familiarity with the three main types of file formats that are allowed in email: GIFs, PNGs and JPEGs While other formats, such as TIFF and Raw are popular with photographers, they often produce large files that are not conducive to email sending and display. GIFs, PNGs and JPEGs produce reasonably small files and they are accepted by all the major email clients nowadays. Each has its advantages in certain situations and with certain types of images. So when should you use each? Here is a primer:

JPEG

JPEG is what is known as a “lossy” format because it loses some of its color information in order to keep the file size small. It reduces file size by taking contiguous areas with similar values and giving them the same value. Because of its reliance and contiguous areas, how much a JPEG file will compress things is contingent on whether or not areas with the same or close color values are next to each other. As a rule, the JPEG format is preferred for photographic images because is uses the full RGB palette. There are a few instances where GIF files will produce a smaller file with less image degradation, but these are few and far between. With the JPEG format, it is possible to control the size of the file by controlling the image quality. The higher the quality, the bigger the file and the less artifacting you are likely to see in the image.

GIF

GIF takes a slightly different approach to file size. A GIF file uses indexed color and a lossless compression format called LZW. With indexed color, you specify exactly how many colors your image will contain and what those colors will be. The more colors you choose, the larger the file, but GIF files have an upper limit of 256 colors, so they are not very useful for photographic images. One of GIFs strongest features is its ability to produce animations. This is the format to use if you want to add animation to your images. Because of its color limitations, if you want to add this animation to a photograph, it is best to limit the animation to one section of the photograph and use a sliced image to insert it (see Slicing Images chapter).

PNG

PNG was developed as an open source alternative to GIF after Unisys announced that they would start seeking royalties from any software using it. The threat proved short-lived, however, and the Unisys patent expired before PNG was officially accepted as an international standard. As a consequence, you’ll still find plenty of GIF files in email and on the web. Like JPEG, PNG can work from a full RGB color palette, and like GIF it uses a lossless compression technique. But unlike the other two formats, PNG files can be saved with a transparent background. Of the three file formats discussed here, it is the newest. As a consequence, some older versions of Lotus Notes and IE cannot handle PNG files, but all moderns browsers and mobile devices have no problem display PNG files.

APPENDIX D: IMAGE MANIPULATION SOFTWARE

Don’t have Photoshop or Dreamweaver? Here are some alternative resources for compressing images and creating image maps.

Image Slicing software

Gimp

http://www.gimp.org

Gimp is the open source alternative to Photoshop. It is remarkably powerful for a free program, but it is also a bit more complicated to use.

Image Mapping software

Image-maps.com

http://www.image-maps.com/

This is a browser based image map creator. It can create rectangular and irregularly-shaped polygons. It is a little trickier to use at first, but easy enough once you get the hang of it. Finished maps are generated as HTML code you can cut and paste in your email. Image Maps save the code as a DIV tag.

Online Image Map Editor

http://www.maschek.hu/

Similar to the previous application. You upload your image and create the image maps, which are displayed as HTML that you can add to your file. This one is a little more complicated to use than image-maps and requires a good understanding of HTML.

Image Mapper

http://www.coffeecup.com/image-mapper/

A stand-alone program that lets you create rectangular image maps. It is very easy to use. $14.95. The company that offers this also offers several other tools that provide a good alternative to Dreamweaver.

Image Compression Software

RIOT

http://luci.criosweb.ro/riot/

RIOT is a free program that lets you quickly reduce the size of your images with very little quality degradation. You can, of course, do all of this in Photoshop when you save the image, but RIOT has better compression, and it loads quickly, which makes it come in handy when time is of the essence.

About Goolara

Goolara has been in the email marketing business since 2005. Symphonie, Goolara’s premiere email marketing solution is available in on-premise and cloud-based, SaaS deployments. The powerful software features many advanced capabilities, such as full-featured dynamic content, transactional and triggered email, and customizable report generation features. It is easy to use and runs from a browser-based interface using Chrome, Firefox, Internet Explorer, or Safari. Goolara is headquartered in Alameda, California and can be found online at www.goolara.com.

Goolara, LLC

2150 Mariner Square Drive, Suite 100

Alameda, CA 94501

Telephone: (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2013 Goolara, LLC All rights reserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved. All other company and product names and logos may be trademarks of the respective companies with which they are associated.

www.goolara.com