How to Add Dynamic Images in Mailchimp

Mailchimp will personalize an image URL. It just won’t tell you that it’s doing it, and along the way it gives you two chances to conclude the whole thing is broken when it isn’t. A dynamic image is one image URL that resolves per subscriber at open: their first name in the artwork, their city, the weather where they are. Mailchimp holds that data in merge fields, and connecting the two takes three steps and two pieces of Mailchimp-specific knowledge.

Mailchimp dynamic images use the same mechanism as a countdown timer, with parameters on the image URL that you fill with merge tags. The two things to know: the tag needs a prefix you may never have used, and the editor will show a broken image right up until you switch on live merge tags. Both are below.

Step 1: Build the image in Alterable

1. Open the dynamic image tool, design the artwork, and add a variable wherever a subscriber’s own value should appear.

2. Add rules if the image should change by condition: location, device, language, time of day or weather.

3. Copy the embed. It’s a link around the image, with one parameter per variable and MERGE_TAG where each value goes:

   <a href="https://next.alterable.com/dynamic-images/click/YOUR-IMAGE-ID">
       <img src="https://next.alterable.com/dynamic-images/YOUR-IMAGE-ID.png?firstname=MERGE_TAG" />
   </a>

Step 2: Swap the values for Mailchimp merge tags

Replace each MERGE_TAG with the matching merge tag, using the URL: variant:

<a href="https://next.alterable.com/dynamic-images/click/YOUR-IMAGE-ID">
    <img src="https://next.alterable.com/dynamic-images/YOUR-IMAGE-ID.png?firstname=*|URL:FNAME|*" />
</a>

That prefix matters more than it looks. *|URL:FNAME|* tells Mailchimp to URL-encode the value before substituting it, so a name with a space, an accent or an ampersand can’t break the query string. Plain *|FNAME|* works in body copy and fails quietly the first time a subscriber called Anne-Marie O’Brien opens the email. Use the URL: variant for anything that goes inside a URL.

Set a default value on the merge field in your audience settings while you’re there. Mailchimp substitutes that default for anyone missing the data, which beats sending artwork with a blank where the name should be.

Step 3: Add it to your Mailchimp email

1. Open the email in the editor.

2. Drag a Code block to where the image should sit. It has to be a Code block: merge tags inside an image URL won’t resolve from the standard Image block, which is where people paste it first.

3. Paste your image tag into the Code field.

4. Position it and save.

Customer Journeys use the same builders, so the Code block behaves the same in an automated email.

Why it looks broken, and how to check it properly

Expect the image to be broken the moment you paste it. The URL still contains the literal *|URL:FNAME|* at that point, so there’s nothing for the browser to fetch. This is the single most common reason people decide the setup failed. It hasn’t.

To see it render, open Preview and switch on Enable live merge tag info, which makes Mailchimp substitute real data. Then send a real test to a live address, because Mailchimp’s test sends fill some merge tags and not others, and the inbox is the only proof that counts. Check one subscriber with a first name and one without, so you see both the personalized image and the default you set.

Once it’s right, it stays right on every open. The image is rendered when it’s requested rather than when the campaign is sent, so a subscriber who opens on Monday and again on Thursday gets it drawn twice, against whatever their merge fields and the conditions in your rules say at that moment.