- 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.
- 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.
Step 1Open your image in Photoshop and determine which pieces need to be linked separately from others.
Step 2From 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.
Step 3Subdivide 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.
Step 4When 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 5Save for web, selecting the "Images Only" option.
Now It's Time to Code
Start with an empty table with the width of the original image set on the cell:
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:
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.
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.