Using images in your custom MailChimp template

Your template gives you a lot of freedom in creating your email campaigns, but there is one important consideration to keep in mind when creating your emails: images.

Images are an important part of email marketing, but with the high number of different email clients available, each with their own way of displaying your email’s code, it can be difficult to control the way they choose to display your images. Since we now have to cater for high resolution retina displays, it is more common to include images at double (or larger) their intended display size, and then scale them down to create the appearance of high resolutions images. Some email clients have a problem with this however…

The worst offender is Outlook, particularly its earlier versions. To cut a long story short, Outlook often likes to ignore any scaling of oversized images, and will display them at their true dimensions, meaning your images will grow to double the size of the rest of the email.

Luckily, there is an easy step to fix this when creating your campaign in MailChimp.

Setting image sizes

When you add a new repeatable section to your email, if it contains an image, you’ll see the default placeholder image which you can swap for your desired image. Once you’ve added your image, click on the ‘Settings’ tab in the editor pane. In here, you can set the ‘image size’. This is the ‘display’ size of the image in the email, and not the ‘actual size’ of the image. Setting these dimensions is crucial to ensuring that your images display as intended.

You’ll notice the option to ‘keep proportions’ is checked by default, we recommend leaving this as is. All you have to do is enter a width and MailChimp will automatically calculate the correct height for you.

Remember: when sizing images for emails, we only care about width – height takes care of itself.

How do I know what sizes to set?

Your template will likely include different sizes of images for different section types. To quickly see what dimensions you should enter, simply hover over the image you are editing in the preview area, and you will see it will display something like ‘600px wide x any height’. This width is the desired, scaled width of the image in this section type, and is the width you need to enter in the setting’s pane for this image.

Now, set the image width

Now that you have the width in pixels, simply enter into the width field in settings and the height will automatically be calculated for you. Click ‘save’, and your image is now size correctly!

What size should my original images be?

Your email templates maximum width is 600px, so we recommend making your original, double sized images no larger than 1200px wide. The height of the image is up to you. MailChimp also displays errors if uploaded images are wider than 1200px, so its best to resize them before upload.

This is also beneficial to the people receiving your email, as they have to download each image, and if they are very large 4000px wide images, your email will take a while to load. It is also recommended to apply some compression to your images before uploading them to MailChimp. This helps improve loading time, and there are plenty of free desktop applications that will do this for you.

Important note about placeholder images

Your template uses placeholder images to help you visualise your campaign’s look as you create it. The placeholders are stored in the MailChimp media like all of your other images, so you are free to use them in your campaign if you wish. However, it is important to note that because these images are included in the template by default, they are not automatically sized and must have their size set the same as if you added a different image. If this is not set, the images will display at their original, doubled sized in Outlook and possibly other email clients.

So remember, any editable image included in the body of your email, placeholder or not, must have width and height set in the ‘Settings’ tab.

Note: non-editable images, like your logo or decorative graphics, are fixed in size and will always display correctly, so you do not need to worry about those.