Simple Email Marketing
Home > Resource Center > Account how-to > Image specs for your own HTML mailings

Image specs for your own HTML mailings

If you're including images in your freestyle HTML mailing, follow these guidelines for email-friendly coding. (If you're not HTML-savvy, use the drag & drop editor instead.)

 

Image specifications for email

Image size: Header graphics should be between 600-700 pixels wide, with a proportional height (a general guideline is 100-200 pixels). For images within your mailing's content, we recommend 480 x 480 pixels or smaller. Keep in mind that the larger the image, the greater the chance an email filter or firewall will block the image. (If you have one large image, we recommend building a slice-and-dice, which involves slicing the image into smaller images and coding them together in an HTML table to create a seamless-looking image.) In addition, some servers will reject or filter an email if the content is too image-heavy so make sure to include a balance of text and images.
For the best experience on a retina display: you'll want to double the size of your image; for instance, if you have a 640px header graphic, you'd upload a 1280px version.

File type: Save your image as a .jpeg or .gif format before using it in your code.

Color profile: Your images need to be in RGB color values, as opposed to CMYK color values. CMYK color values are for print and won't render in an online environment.

DPI: Set your images to maximum quality with a resolution of 72dpi.

Image-editing tools

You may have the Adobe Suite for image editing, but if not, here are some helpful (and free) online tools:

Image hosting

Just like images on a webpage, you'll need to publicly host any images you include in the mailing in order for them to correctly display. Be sure to include the full link – no relative links – when referencing them in your code. Here's an example of an absolute link:

<img src="full URL here" alt="My Image" width="480" height="480" border="0">

By full URL, we mean it must be appended with http:// or https:// rather than just www.

If you're not able to host images on your own website, you can store them in the Image Library in your account. Or, consider using a free service or nearly-free service like Dropbox or Amazon S3.

Image maps

An image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world might have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Avoid using image maps as they are not always reliable in an email environment. Instead, wrap your image in a URL like this:

<a href="http://www.sample.com" target="_new"><img src="image's URL here" alt="My Image" width="480" height="480" border="0"></a>

Animated GIFs

Animated GIFs are a good alternative to other forms of animation and, unlike Flash, are supported by almost all of the major desktop and webmail-based email clients with the only exceptions being Outlook 2007 and 2010.* The main consideration when using an animated GIF in an email is size. The larger the image and the more animation frames it contains, the larger you email will become in weight. If the email exceeds a file size threshold set by the recipient filters (these thresholds vary), it may be rejected and never reach your recipients. To minimize this risk, we suggest the following:

  • If you want your gif to span the entire width of the content area, size it at 1280px wide.
  • Keep the number of frames less than 10.
  • Put your most important frame first, to ensure Outlook 2007 and 2010 users don't miss the message.

*Outlook 2007 and 2010 will only display the first frame in an animated GIF.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.