Coding Pixel Perfect Emails [Part 2]

Embedding images with your email.

1.) They can be hero images that span the entire width, in which case it’s best to wrap them in their own table. You can even stack a number of images vertically, just make sure you set a display:block css attribute on them to prevent Gmail from adding gaps between them.

2.) They can be along side a particular article, in this case we don’t want it to span the entire width, so we’ll just split the table to give the image it’s own cell (make sure you set the valign for both cells to “Top”) and include an extra cell as the gutter to provide spacing between the image and text.

3.) They can also be embedded within the body text of a particular article, in this case we’ll want to set it’s “align” attribute to left or right. Whichever side you choose, include the gutter within the actual image on the opposite side (10-20 pixels will do). Many email clients will strip out any margin you set and make the text but right up against the image and ruin your formatting.

What kind of images should I use?

For the majority of situations you should save your image as a JPG with the quality set to somewhere around 65. This strikes a great balance between file size and image quality.

Anywhere you may need an image with transparency (rounded corners on a gradient or patterned background for instance) save the image as a PNG-24, this format beautifully preserves image detail and allows all levels of gradient (unlike GIF which supports only completely transparent or opaque, leading to sometime rough edges), the tradeoff is a relatively large filesize. Use sparingly.

For animations, the good old standby is the GIF, not much choice in this. There are some email clients that support video in email but that is not currently well supported enough to rely upon.

Where should I not use images?

One very common area is drop shadows. If you use static images, you lose a great deal of flexibility in the email. If you use background images, you can run into a number of rendering issues. The best way to do a simple drop shadow in an email is by coding it into the HTML.

To do this, simply count the number of columns in your drop shadow and add that many columns on each side of your table, and fill in each column with it’s respective color. There you have it, a pixel-perfect drop shadow that dynamically stretches to fit the content and is even visible through image blocking!

Read other “Pixel Perfect” posts:

• Part 4: Responsive Emails
• Part 3: Reset styles and client bugs
• Part 1: Making it Modular