Image requirements are generally the same for all templates, but image sizes vary based on the template you choose. Some considerations should also be made for mobile devices and newer, high-density displays.

For more information about troubleshooting images in your campaigns, check out this article.

Contents

Image requirements and sizes

DPI and file size

Image resolution for the web is 72 ppi or dpi (pixels/dots per inch). A higher dpi is used for print design, and can increase your file size. MailChimp recommends keeping file sizes less than 1MB. Larger files load slowly in your subscribers’ inboxes, and nobody wants that.

Format

When saving images, use PNG or JPG format. You can use GIF format if you need to retain transparency, but keep in mind that this format supports fewer colors. That is, a GIF can be good for a logo or icon, but you’ll want to stick with PNG or JPG for photos and other images that use a lot of color variety.

Color mode or profile

Colors used online are different from those used in print, so it’s important to make sure the colors in your image are set correctly. Web images should be saved using the RGB color profile or mode. CMYK, which is what designers use for print, doesn’t render accurately online and in some cases, can actually break your embedded image.

High-density screens

Many smartphones, tablets, and laptops feature high definition screens, made possible by a higher ratio of pixels per inch. Since recommended web resolution is still 72 ppi, web images can appear fuzzy on these displays.

To make sure your images appear clearly on all screens, you can save your 72 ppi images at double the size needed for the image block you’re using in your campaign. For example, if your header image is 600 x 200, you can upload a 72 ppi image that is 1200 x 400 pixels. Learn more about high-density displays on the MailChimp blog.

Image sizes

When you’re saving images, you should take into account any padding or margin styles in the campaign template. For example, in a template that’s 600 pixels wide that includes 20-pixel padding, a full-width image would only need to be 560 pixels wide.

You may be able to estimate the size of some of image blocks, but here’s a handy list of common sizes we use in MailChimp templates.

  • Pre-header area: 560px
  • Body area for 1 column templates (no sidebar): 560px
  • Social bar and utility bar: 560px
  • Header: 600px
  • Body area (with sidebar): 350px
  • Sidebar: 160px
  • 2 column: 260px
  • 3 column: 160px
  • 4 column: 110px
  • Footer left: 370px
  • Footer right: 170px

About MailChimp templates

MailChimp provides two types of customizable templates: drag and drop templates and classic templates. The majority of these templates are designed for a maximum width of 600 pixels. In rare cases, as with Facebook-friendly templates, the maximum width is 500 pixels.

Classic templates are basic layouts with limited flexibility. You can add your content and images, but the layouts and some background images aren’t editable. For most classic templates, you can hover over an image block or an image in a text block to see what size image will fit there.

Drag and drop templates are more flexible, modular, and simple to customize. These templates automatically size your images to fit into the content blocks you choose. Since you can quickly drag and drop images from one block to another, it’s important to pay attention to image sizes and resolution.


Related Articles