Microsoft has made a monster and it's not going anywhere.

So if Microsoft doesn't make it hard already for web design they seem to not want and help with email newsletters either. Aside from their lack of support of most css declarations you can also add to the list of problems scaling images.

With this new problem of image scaling to deal with, what can be done to achieve a consistent layout in all email clients. We know what to expect now with images in outlook 2007 and computers that are not set at 96dpi. If we had an image of 100 pixels by 100 pixels when viewed on a computer with 120dpi the image would be scaled to 125px by 125px, and on a computer at 72dpi it would be 75px by 75px. We're thinking there's something in the water over at the outlook team because this seems to be an attempt to keep graphics on the screen the same physical size regardless of the device using to read an email. Yes they actually are re-rendering your images in the email client.

Can't we use silver bullets or garlic or something to get the monster to behave?

We tested a lot of solutions that people have suggested on a few other sites that have covered this subject and have not had any luck with any of them. There are ones that suggest removing “px” from the elements width and height attribute or some suggesting adding “px”. There are suggestions that if you only use gifs and no jpegs or pngs. We have personal not found that doing any of these will help with the scaling issue.

Things we tried that failed to stop scaling:

• Using CSS inline styles with and without "px"
• Using old img attributes with and without "px"
• Using both at once
• Using PNG, JPG, or GIFs.
• Saving the images in photoshop at different DPI's (72, 96, 120) this kind of helps as it doesn't scale if the receiving client is at the same DPI.

This left us with a few options to choose from. We could just make the newsletter graphic only either with a single large image or sliced up in illustrator or photoshop. This isn't great as there's no HTML text in the message so it's bad for spam, and it can't be used in a template that the client edits themselves. Another option would be to do text only newsletters but that's not very impressive.

If you can't tame the beast - Slice it up!

(Allow the image to scale without breaking the layout)

None of these work-arounds were acceptable for us, and after much experimentation we concluded there is simply no way to stop Outlook from re-rending your images larger. So the challenge changed to making emails that still looked good after they scaled larger. We using illustrator for our layouts, sliced the images, and then exported the graphics and tables (Photoshop would work the same as well). Here's a sample of how we sliced a recent design.

Example Email Newsletter

We'll be showing our solution referencing this example. If you view the source you'll notice mailchimp's obsessive injection of all relevant styles on ever single tag in the layout. This is why we're fans of mailchimp. It's bloated code, but stable bloated code.

Check out the finished newsletter here >

Example of the Slicing "Trick"

Slices 21 through 27 all have little white graphics of various small sizes in them. If outlook wasn't so strange we could have skipped this row entirely and just padded the text out in the "content area" below. Well outlook is that strange, so leave these alone as they will all be scaled in equal proportion larger by outlook.

Don't be tempted to make a single large slice that contains slices 21 through 27, as when it scales in outlook the rounding average of adding 6 smaller images are going to be different then 1 single large image. When all these little images scale larger they push open the table, but don't have any funny gaps.

Slices 31 through 35 are horizontally spanned cells which contain all the HTML text, headings, and images added by the mailchimp.com template engine. (If you use a different system all that matters is that the styles are applied as in-line style attributes on every tag).

Email at 96dpi

This is how the email looked at the regular 96dpi.

Email at 120dpi

This is how the email looked at 120dpi with images used to hold open the table cells of the layout. The text does not scale larger but the graphics do (Logic prevails at miscrosoft once again). You can see the lower quality of the text "News Release" but it's legible. Ironically if you have a large high quality monitor using outlook 2007/10 you're probably used to poor quality images in your emails.

Both emails look good, nothing is broken in either one. The 96 DPI is  better and matches the creative, but the 120 DPI still appears with acceptable quality. 

Tips for Slicing

• All slices should go all the way across the area of the artwork both vertically and horizontally.
• Do not merge slices in Illustrator / Photoshop. This makes single large images which will scale differently then many smaller images.
• Use the exported HTML and merge the table slices once exported. Horizontal table cell spans are OK, but vertical spans will fail in Outlook 2007/10.

The right solution for us

Using images as spacers worked best for use because we didn't want to compromise our design and we wanted the mix of images and text. It takes a little extra time to implement but delivers an acceptable layout. The one thing to remember with creating email campaigns is to test, test, test.

If you sorted out a solution to stop Outlook from scaling the images in the first place please post the solution in the comments! I'd be extactic to mark this article as obsolete!