Image Recommendations for Content Blocks

Before you upload your images to Mailchimp, check out these recommendations to help make sure your images look great. Our recommendations are based on the type of content block you’re using in your marketing email or landing page.

In this article, you’ll learn about our recommendations for images in the new builder and the classic builder.

General tips for images

Here are some general tips for your images.

• Format
  Save your images as PNG, JPG, or GIF files. Use the PNG format to maintain transparency.
• Color mode or profile
  Save your images with the RGB color mode or profile. CMYK, which is what designers use for print, doesn't render accurately online and can break your embedded image.
• Alt text
  It’s a good idea to add alt text to your images. Alt text is essential for accessibility and for viewers who might have trouble downloading your images. It can also help with search engine optimization for your landing pages.
• High-definition screens
  Many devices feature high-definition screens, such as Apple’s Retina display. This display type offers a higher ratio of pixels per inch, which can make some images appear fuzzy. To make sure your images appear clearly on all screens, use a higher resolution photo and constrain the dimensions.
• File size
  We recommend a maximum file size of 1MB for images. A 72 DPI is generally enough for the web, but isn't required.
• Image size
  Emails and landing pages have a limited width for images, and Mailchimp will automatically size your images to fit into an email. This helps prevent slow loading times or your emails from being clipped as a result of very large image sizes.

The following sections recommend image widths that will best fit within a layout.

Image sizes for emails

Mailchimp’s classic email templates are 600 pixels wide, while templates in the new builder are 660px wide. It’s best to use images with a range of 660-1320 pixels in the new builder and 600-1200 pixels in the classic builder. Mailchimp will resize your image to fit the content block it’s added to.

In the classic builder, you might receive an alert if you add an image to a template that is larger than our recommended width. Click Let’s fix it to adjust the image’s dimensions in the photo editor.

The underlying code for the template width can't be changed in the email builder. To create an email that's wider, we strongly recommend providing your own code or hiring a designer to create the code for you.

Minimum image size recommendations vary based on the number of columns in your email template.

If you’re working in the classic builder, sizing can also vary depending on the type of content block you’re working with. Here are our minimum size recommendations for images in the Image, Image Card, Image + Text, and Image Group content blocks in the classic builder.

Image

In the classic builder, default logo blocks match the dimensions of an Image content block. Our recommended image width is a minimum of 564 pixels.

Image card

Image + text

Image group

If you add Image Group blocks to a multi-column section, make sure smaller images are clear enough for your recipients to see.

Image sizes for landing pages

Mailchimp’s landing pages come in a variety of widths, so the ideal image size depends on the width you choose. Before you upload your images to Mailchimp, scale them to the size they need to be to eliminate unneeded pixels.

If you set the width of your landing page at 100%, images can appear differently depending on the screen resolution of the person viewing your landing page. In this case, we recommend you use larger images. We recommend keeping images between 1500–2500 pixels wide, because Mailchimp will resize your images to fit the content area. Images larger than 2500 pixels may not be resized properly. Keep in mind that larger images can slow down the loading of your landing page.

We recommend these image sizes for the Image, Image Card, Image + Text, and Image Group content blocks on your landing page.

Image

Image card

Image + text

Image group

Adjust the landing page width

To adjust the page width of your landing page, follow these steps.

1. Click Campaigns, then click All campaigns.
2. If you have more than one audience, click the Current audience drop-down and choose the one associated with your landing page.
3. Click Edit for the landing page you want to work with. You may need to select Edit from the drop-down next to View Report.
4. Click Edit design.
5. Click the Style tab, then click Page.
6. In the Page Container Style section, use the Width drop-down to choose a width.
   
7. Click Save.