Image Recommendations for Content Blocks

Before you upload your images to Mailchimp, check out these image recommendations to ensure they’ll look great. Our recommendations are based on the type of content block you’re using in your email campaign or landing page.

In this article, you’ll learn about our recommendations for images in Image, Image Card, and Image + Caption content blocks.

General Tips for Images

Here are some general tips for your images.

  • Format
    When you save images, use PNG, JPG, or GIF format. You can use PNG format if you need to retain transparency.
  • 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 images 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.
  • 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 smartphones, tablets, and laptops feature high-definition screens, such as retina displays, that offer a higher ratio of pixels per inch. This means that some images may appear fuzzy on these displays. To make sure your images appear clearly on all screens, you can use a higher resolution photo in an Image content block, and constrain the dimensions.
  • File Size
    It's best to avoid overly large images, both in file size and pixel dimensions. We recommend a maximum file size of 1MB for images. 72 DPI is generally sufficient for the web, but isn't required. We don't recommend uploading images that are significantly larger than your content area or template.
  • Image Size
    Emails and landing pages have a limited amount of width for images. For specific width recommendations, check out the following sections based on the type of content you’re creating.

Image Sizes for Emails

Mailchimp’s email templates are 600 pixels wide, so it’s best to size your images with that maximum width in mind.

Image size requirements vary based on the number of columns in your email template.

Columns Recommended Image Width
Full-width template images 500px
2 column template images 264px
3 column template images 164px

Requirements can also vary depending on the type of content block you’re working with. Here are our size recommendations for images in the Image, Image Card, and Image + Caption content blocks in your email campaign.

Image

Content Block Settings Recommended Image Width
Set Edge to edge 564px

Image Card

Content Block Settings Recommended Image Width
Set Edge to edge 564px
Not set Edge to edge 528px

Image + Caption

Content Block Settings Recommended Image Width
Left or right aligned with one-third caption width 352px max
Left or right aligned with half caption width 264px max
Left or right aligned with two-thirds caption width 176px max
Left or right aligned with three-quarters caption width 132px max

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. But it’s important to keep in mind that larger images can slow down your landing page.

Here are our size recommendations for images in the Image, Image Card, and Image + Caption content blocks in your landing page.

Image

Page Width Recommended Image Width
780px 564px
960px 924px
1224px 924px
1332px 1188px

Image Card

Page Width Content Block Settings Recommended Image Width
780px Set Edge to edge 744px
780px Not set Edge to edge 708px
960px Set Edge to edge 924px
960px Not set Edge to edge 888px
1224px Set Edge to edge 924px
1224px Not set Edge to edge 888px
1332px Set Edge to edge 1188px
1332px Not set Edge to edge 1152px

Image + Caption

Page Width Content Block Settings Recommended Image Width
780px Left or right aligned, with one-third caption width 515px max
780px Left or right aligned, with half caption width 363px max
780px Left or right aligned, with two-thirds caption width 211px max
780px Left or right aligned, with three-quarters caption width 173px max
960px Left or right aligned, with one-third caption width 642px max
960px Left or right aligned, with half caption width 453px max
960px Left or right aligned, with two-thirds caption width 265px max
960px Left or right aligned, with three-quarters caption width 218px max
1224px Left or right aligned, with one-third caption width 642px max
1224px Left or right aligned, with half caption width 453px max
1224px Left or right aligned, with two-thirds caption width 265px max
1224px Left or right aligned, with three-quarters caption width 218px max
1332px Left or right aligned, with one-third caption width 827px max
1332px Left or right aligned, with half caption width 585px max
1332px Left or right aligned, with two-thirds caption width 344px max
1332px Left or right aligned, with three-quarters caption width 284px max

Adjust the Landing Page Width

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

  1. Navigate to the Campaigns page in your account.
  2. Click the draft landing page you want to work with.
  3. Click the Design tab.
  4. Click Page.
  5. In the Page Container Style section choose a width.
  6. Click Save.

Background Images on Landing Pages

Larger background images will look cleaner on larger screens, but we recommend keeping images between 1500 and 2500 pixels wide. The recommended image height depends on how much content you’ve got in your landing page, but it’s important to keep in mind that larger images can slow down your page.


Was this article helpful?

Anything else we can do to improve our site?