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.

ColumnsRecommended Image Width
Full-width template images500px
2 column template images264px
3 column template images164px

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 SettingsRecommended Image Width
Set Edge to edge564px

Image Card

Content Block SettingsRecommended Image Width
Set Edge to edge564px
Not set Edge to edge528px

Image + Caption

Content Block SettingsRecommended Image Width
Left or right aligned with one-third caption width352px max
Left or right aligned with half caption width264px max
Left or right aligned with two-thirds caption width176px max
Left or right aligned with three-quarters caption width132px 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 WidthRecommended Image Width
780px564px
960px924px
1224px924px
1332px1188px

Image Card

Page WidthContent Block SettingsRecommended Image Width
780pxSet Edge to edge744px
780pxNot set Edge to edge708px
960pxSet Edge to edge924px
960pxNot set Edge to edge888px
1224pxSet Edge to edge924px
1224pxNot set Edge to edge888px
1332pxSet Edge to edge1188px
1332pxNot set Edge to edge1152px

Image + Caption

Page WidthContent Block SettingsRecommended Image Width
780pxLeft or right aligned, with one-third caption width515px max
780pxLeft or right aligned, with half caption width363px max
780pxLeft or right aligned, with two-thirds caption width211px max
780pxLeft or right aligned, with three-quarters caption width173px max
960pxLeft or right aligned, with one-third caption width642px max
960pxLeft or right aligned, with half caption width453px max
960pxLeft or right aligned, with two-thirds caption width265px max
960pxLeft or right aligned, with three-quarters caption width218px max
1224pxLeft or right aligned, with one-third caption width642px max
1224pxLeft or right aligned, with half caption width453px max
1224pxLeft or right aligned, with two-thirds caption width265px max
1224pxLeft or right aligned, with three-quarters caption width218px max
1332pxLeft or right aligned, with one-third caption width827px max
1332pxLeft or right aligned, with half caption width585px max
1332pxLeft or right aligned, with two-thirds caption width344px max
1332pxLeft or right aligned, with three-quarters caption width284px 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?