How to Build an Email Using Sliced Images (Without Embarrassing Yourself or Getting Fired)

Rick Boquist, Professional Services Consultant

As an email designer/coder/all-around HTML cleanup guy, customers ask me to troubleshoot problems they’re seeing in messages created from sliced images. Because there are typically two root causes of these issues, they tend to manifest themselves in one of two specific ways:

  1. Small gaps appear beneath each slice. This shows up primarily in Gmail, and is due to 3 pixels of space being added below images if they don’t have a specific style applied.
  2. The message explodes horizontally with huge spaces between the slices. This can show up in some versions of Outlook, and is usually caused by an overabundance of colspans and rowspans generated as a result of haphazard slices being saved for web by Photoshop.

The simplest solution to these problems is to slice your image in a specific order and then use nested tables to completely avoid the use of colspans and rowspans in your code. Though my method is a bit more time-consuming than simply having Photoshop generate your HTML when you “Save for Web,” the tradeoff is that your messages coded from sliced content will render without gaps or spaces.

The following process for slicing an image yields consistently satisfactory results:

Step 1

Open your image in Photoshop and determine which pieces need to be linked separately from others.

Step 2

From there, divide the image into full-width horizontal columns based on where different linked pieces need to be separated vertically. Place horizontal guides to mark where the seams will be.

GuidesStep 3

Subdivide and slice each row into columns as dictated by the linking requirements. The tops and bottoms should be bounded by the guides from the previous step. The widths of the slices can vary from row to row, so there is no need to attempt to slice to a grid. If parts of the image extend vertically across rows, simply include a column for that element in each of the rows that it crosses.

SlicesStep 4

When making your slices, zoom in close and be diligent in making certain that your slices don’t overlap but instead line up perfectly on each side. Utilizing the “snap” functionality (under “View”) can be very helpful here because these need to be accurate to the pixel.

Step 5

Save for web, selecting the “Images Only” option.

Now It’s Time to Code

Step 1

Start with an empty table with the width of the original image set on the cell:

Step 2

Duplicate the empty row for as many rows as you created in the sliced image. Any rows with only a single column can be left alone at this point, but any rows with multiple columns will need another table nested inside of them like this, with as many cells per table as there are slices in that row:

Step 3

Now we can drop in our images – one per cell – being sure to include a few specific things to keep everything tight with no seams:

Setting the border to 0 keeps borders from showing up in some email clients when this image gets linked, and the “display: block;” is the specific fix for preventing the small gap below images. As a general rule, I copy all text off the image and include that in the alt text for the image.

Step 4

As a bit of final housekeeping, if any of your rows are fewer than 20 pixels in height, you’ll want to also include a style on each of the table cells directly around the images in that row:

Once all of your images and links are in the HTML, you’re done! You’ve got a neatly contained table housing a well-sliced image-based message that should hold up everywhere you send it.

  • Brianna Fisher

    Hi Rick! I really appreciate what you’re trying to do here, but for a very inexperienced coder, I got lost in the html code. I did what you shared to do in text wrangler, but when I pull it up on the web, the images are broken. I only put in my filename.jpg. Do I need more after the img src? Thanks!

    • Rick

      Hey Brianna-
      You’ll need to have the images hosted somewhere online first (in your Bronto hosting space or somewhere else), and then you’ll want to be sure to use the full URL path for the images – it will be something like: https://app.bronto.com/static/img/bronto_logo_thin.png.
      If you plug the image URL into a browser, it should pull the image up for you.
      Hopefully that helps!