Problems with Images in Emails
I have noticed strange image distortions happening when I embed an image in an Outlook email message. I’m not talking about adding the image as an attachment, but about directly embedding the image in an HTML-formatted email message so that it immediately shows for the recipient.
The strange thing is that this will happen rather randomly. About 70% of the time embedded image shows up perfectly at the receiving end. However it’s the remaining 30% that’s been a concern because the image will either arrive with:
- Significant quality loss
- Sizing distortions
- Only partially rendering
Why the Quality Loss?
This ongoing image distortion appears to be due to how MS Outlook 2007 handles embedded email images. Specifically, Outlook 2007 requires images to be set to a quality level of exactly 96 dpi.
What is dpi and what does it mean? Well, it is the resolution setting for the image and stands for Dots Per Inch. Often the term ppi is used, which stands for Pixels Per Inch, but the two terms are synonymous.
So what exactly is happening with the resolution setting in Outlook emails?
When you click ‘Send’ on an email with an embedded image, Outlook will attempt to both rescale the embedded image to 96 dpi as well as to compress the image. Images below 96 dpi will apparently resize to larger than expected (I have not tested this). On the other hand, images above 96 dpi will experience the severe quality loss that I have been seeing.
This quality loss/distortion can be a big problem if you are working with carefully designed graphics for a signature, a corporate newsletter, or for a marketing campaign. Although all emails should include a click-able link to a Web based version of the email, this takes an extra step for the user and is not the optimal way the email should work.
The Solution so Far
Images for email campaigns, etc are mainly created by professional designers where format and size are not a limitation or consideration. So the images initially arrive in multi-megabyte-sized EPS or BMP format files that were created using Adobe Illustrator. These images are also typically set at resolutions of 300dpi and up, which is definitely not something that MS Outlook will handle well. So a way needs to exist to adjust the images to a format that will be compatible with MS Outlook and most other email software.
To adjust the settings of print-quality images to be more email friendly I like to import the images into Paint.NET. Paint.NET is currently my favorite paint program for working with images. It is open-source and free, but it comes with all of the features one needs in a simple and intuitive user interface.
Below are the steps I take in Paint.NET to set the size and dpi resolution. I’ve added an example image for reference.
- I open the image in Paint.NET
- I click the resize option for the image (or Ctrl-R)
- I make sure that the image width and height dimensions are set correctly for embedding into the email. These dimensions of course depend on the image itself
- Then, while still in the resize popup box, I set the Resolution option (which is right below the width and height options. I keep the dimensions drop-down set at pixels/inch (which is the same thing as dpi or Dots Per Inch) and then enter 96 in the resolution entry box.
- Finally I save the image as a PNG file and embed it in my email.
Summary
Following the steps I outlined above has worked so far to ensure that images embedded in Outlook emails do not degrade or distort in quality. I continue to run tests and monitor the results of this technique, but so far things look promising.
Justin Cooney 