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. Follow our image requirements to avoid issues with images in your campaigns.
In this article:
Image Requirements and Sizes
DPI and File Size
While there are not exact standards for image resolution for the web, 72 ppi/dpi (pixels/dots per inch) is recommended. 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.
When you save 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. A GIF can be good for a logo or icon, but 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 with the RGB color profile or mode. CMYK, which is what designers use for print, doesn't render accurately online and can sometimes break your embedded image.
Many smartphones, tablets, and laptops feature high-definition screens, such as retina displays, that offer a higher ratio of pixels per inch. This means that images may appear fuzzy on these displays.
To make sure your images appear clearly on all screens, you can save your web-ready images at double the size needed for the image content block you use 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.
Constrain Image Dimensions By 50% For High-Definition Displays checkbox under the
Settings tab for an
Image content block to automatically resize your images for high-definition screens. This feature is only available for Image blocks and not for
Image Card content blocks, or when you add an image to a text content block.
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.
- Preheader area: 560px
- Body area for one-column templates (no sidebar): 560px
- Social bar and utility bar: 560px
- Header: 600px
- Body area (with sidebar): 350px
- Sidebar: 160px
- Two-column: 260px
- Three-column: 160px
- Four-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 areas in a content 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.
|Was this article helpful?||
|What can we do to improve your experience with articles like this?|
At this time, we are unable to reply to any responses, but we'll use this information to keep the site up-to-date.