Slicing Images into HTML for Email
Many clients ask us how to slice an image and put it into an email message. This is a good technique if you need to link different parts of the images to different web pages. Below you'll find directions for how to insert sliced images into an HTML email and avoid the most common issues.
Let's take a look at our sample email design, and see how to convert this image into an email message with sliced images and a table structure.
There are two issues you should avoid when slicing an image for an HTML email.
Issue #1: Arbitrarily Slicing the Image
The image below displays the sample email with slices. At first glance, we have captured all the important hot spots of the design. Every area that we would like to hyperlink has been selected. This is a common mistake made when the slices are cut without considering how it will fit in our HTML.
Every area designated with white icons on a blue background are the slices that we have selected. Notice there are additional areas designated with white icons and grey backgrounds. These are slices that are auto generated by the application. Although we have selected 18 areas, upon exporting this file there will be 43 image files with almost none of them being in the same column or row. Even the most skilled coder would have a hard time making it display across a number of email clients. Not to mention forty three ALT tag descriptions.
Issue #2: Auto Generating HTML in Photoshop
With applications like Photoshop, you can auto generate HTML and image assets. This would be an incredible feature if we were designing a webpage, but email clients are not as forgiving as modern web browsers.
Lets take a look at the code block below. Notice that application generates one large table with COLSPAN and/or ROWSPAN in virtually every TD. This table is very complex because of the slices added haphazardly, as shown in Issue #1.
The image below shows how this messages displays across email clients.
Email clients will struggle to render so many different columns and rows. In fact, the only content that rendered correctly did not include COLSPAN or ROWSPAN.
Solution: Keep It Simple
When slicing the image file, take care to keep the slices simple, with horizontal rows stretching across the whole width of the image. This image is sliced into exactly 18 areas in a way that we can create the simplest table structure possible while keeping all of the original hot spots.
Slices have been carefully placed to ensure columns and rows line up as much as possible. This is done to minimize the need for spacer images and in this instance we have eliminated the need for them altogether. Also make sure not to overlap slices and ensure each slice borders the next.
In the auto generated table above, we saw that the table had multiple COLSPAN and ROWSPAN declarations throughout the table. Now that we have created a much simpler table, the message will render correctly in most email clients. As a general rule of thumb, we want to nest tables instead of using ROWSPAN and COLSPAN. This is just one additional step that can be taken to ensure our message renders correctly.
Let's skip the auto generated code and build an outline of the table from the sliced image.
Figure 1.1
Here we have the outline of our table. Now we can add images, hyperlinks, and fill in the ALT tag descriptions to complete the message.
Cleaning up
Since nested tables were used, we want to make sure that we removed all borders, margins and padding from the tables to make sure no spaces are created between the images. In this case, we have added the following attributes and styles to all table tags within the message.
border="0" cellpadding="0" cellspacing="0" style="border: 0; margin: 0; padding: 0;"
Finally we want to add an inline styles to all <img> tags to prevent gaps below any of our images.
style="display: block;"
We end up with the resulting code:
Despite all of our efforts, we open the message and see this:
This is one of the drawbacks of slicing images for email campaigns: if the email client blocks images by default, the subscriber will have to click to download the images.
Mobile version
When slicing images for an email campaign there is a very good chance you will need an entirely different image for your mobile version. If the image you slice contains any photographic elements such as pictures and backgrounds, scaling down the content will result in a loss of image quality. If your design consists of only vector based graphics; using width percentages, and nested tables as described above will enable you to scale down your desktop version for mobile devices.
Our sample design is graphic heavy so we will use our alternate mobile design.
Here is the sliced image created using the sample principles from our desktop version.
Notice that there is one area that we did not create a slice. In this case, we can create a table to display the text since this section is text only on a plain navy background.
The mobile version renders on our mobile device below.
