This article provides tips and recommended image specifications so that you can choose email-friendly images when creating campaigns.

	In This Article
	Recommended Image Specifications Online Resources for Image Editing Image Hosting and Placement Image Maps Animated GIFs Additional Resources

Recommended Image Specifications

Header Image Size

Header graphics should be between 600 to 700 pixels wide, with a proportional height. Generally, 100 to 200 pixels is a good general guideline for height. For the best experience on a retina display, you'll want to double the size of your image. For example, if you have a 640 px header graphic, you should upload a 1280 px version.

Campaign Content Images

For images within the campaign body, we recommend keeping them at 480 px x 480 px or smaller. As image size increases, so does the chance that an email filter or firewall will block that image. Best practice is for the entire email to be less than 2 MB, so be sure to watch the size of the images you're using.

☑	Tip
	If an email's content is too image-heavy, some servers may reject or filter it automatically, so it's important to keep a good balance of text and images in your campaigns. If you have a single large image, then we recommend slicing that image into multiple smaller images and coding them together in an HTML table to create a seamless-looking image.

Image File Types

The most common image files types are:

• GIF
• JPG or JPEG
• PNG

Other image types will also work, but these three types are the most commonly used in email, so they are the safest bet.

☑	Tip
	If you need your image's background to be transparent, we recommend saving it as a PNG. It's not possible to change the background color of an image in Emma's drag and drop editor, but if the background of an image is transparent, then you can change the color of the row behind the image, which will have a similar effect.

Image Quality and Color Profile

All images used in Emma must be in RGB color values, not CMYK color values. CMYK color values are for printed media only and will not render in an online environment. For the best image quality and loading speed, your images should have a resolution of 72 dpi.

Online Resources for Image Editing

Emma's drag and drop editor has a built-in image editor that gives you the ability to crop, rotate, flip, and resize an image, as well as add a filter, text, drawings, shapes, stickers, and frames to your image. Emma's legacy editor also has a built-in image editor that can crop, rotate, and flip your imported images. If additional edits or touch-ups are needed, here are some helpful (and free) online image tools:

• Pixlr
• iPiccy
• Fotor

Image Hosting and Placement

Just like images on a webpage, it's best to publicly host any images you include in your mailing in order for them to correctly display. If you're using Emma's drag and drop editor or legacy editor, we take care of image hosting for you through the built-in image library.

If you're creating a Code-Your-Own (CYO) campaign, you can still use Emma's image library, but you can also choose to host the images on your own website, if desired. You could also consider using a hosting service, such as Dropbox or Amazon S3.

When creating a CYO mailing, be sure to include the complete or absolute link when referencing them in the HTML code; relative links will not work. Here's an example of an absolute link:

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

In this example, when we say "full URL", it means that the URL must begin with http:// or https://, not just www.

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. This differs from a normal image link, in which the entire area of the image links to a single destination. For example, if you created an image map using a map of the world, it 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.

⚠	Warning
	Image maps are not always reliable in email environments and are known to cause deliverability trouble. We recommend avoiding them and dividing the image into separate image files, each with their own link, instead.

 

If you're creating a CYO mailing, you can wrap an image in a URL like this:

<a href="full URL here" target="_new"><img alt="My Image" border="0" height="480" src="image's URL here" width="480"/>

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 web-based email clients, excluding Outlook 2007 - 2013 which will only display the first frame of a GIF.

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 your email will become. If the email exceeds a file size threshold set by recipient filters, it may be rejected and never reach your contacts. While these thresholds vary, best practices are to have the entire email be less than 2MB in size.

To minimize the risk of a GIF causing problems for you, we recommend limiting it to 10 frames or less. If you use more than 10 frames, you may be fine, but 10 is what we suggest as a best practice. Additionally, it's best to put your most important frame first so that any recipients using Outlook 2007 - 2013 don't miss the message. Finally, if you want your GIF to span the entire width of the content area, size it at 1280 px wide.

Additional Resources

• Using the Image and Document Libraries
• Using the Image Block and Its Image Editor
• Using the Legacy Image Block and Its Image Editor