Mailchimp logo

A dynamic image is one image URL that resolves differently for every reader: their first name set into the artwork, the city they are in, the weather outside their window. Mailchimp holds that data in merge fields, and this guide connects the two.

The mechanism is the same one you use for a countdown timer, with one Mailchimp-specific detail that trips people up. Two, actually, and both are below.

Why Use Dynamic Images in Mailchimp?

  • Personalization beyond the subject line – The name in the artwork, not just in the greeting.
  • Rendered at open, not at send – Weather, stock and deadlines are correct when the email is read.
  • One image, one audience – No building a variant per segment, and no per-city version of the same creative.
  • Uses merge fields you already have – If it is in your audience, it can go in the picture.

Step 1: Build the Image in Alterable

1. Log in to Alterable and open the dynamic image tool.

2. Design your image and add the variables you want to personalize, such as a first name or a city.

3. Set your rules if the artwork should change by condition: location, device, language, time of day or weather.

4. Copy the provided HTML code. It is a link wrapped around the image, with one parameter for each variable you added, and Alterable leaves MERGE_TAG in place of each value for you to fill in:

<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 cannot break the query string. Use the plain *|FNAME|* inside body copy, and the URL: variant inside any URL.

Set a default value on the merge field in your audience settings while you are here. Mailchimp will substitute that default for anyone missing the data, which is better than sending an image with a blank where a name should be.

Step 3: Add It to Your Mailchimp Email

1. Open Mailchimp and navigate to the email editor.

2. Drag and drop a Code Block into your email. It has to be a code block: merge tags inside an image URL will not resolve from the standard image block.

3. Paste your image tag into the “Code” field.

4. Resize the image if necessary for a better fit.

5. Preview and test. In preview, switch on live merge tag info so Mailchimp substitutes real data.

Expect the image to look broken the moment you paste it. The URL still contains the literal merge tag at that point, so there is nothing for Mailchimp to fetch. It resolves once live merge tags are on or once you send a test, and this is the single most common reason people think the setup failed when it has not.

Best Practices for Dynamic Images in Mailchimp

  • Always Use the URL: Prefix – Inside a URL, the unencoded tag is a bug waiting for a subscriber named “Anne-Marie O’Brien”.
  • Set Merge Field Defaults – Decide what an unknown first name should say before you send, not after.
  • Send a Real Test – The editor preview is not proof. A test send to a live address is.
  • Keep Alt Text Dynamic Too – The alt text should describe the personalized image, not a generic one.
  • Check a Subscriber With Gaps – Preview against someone missing the field, because that subscriber exists on every list.

In short

Mailchimp will happily personalize an image URL, as long as the tag goes in a code block and carries the URL: prefix. Get those two right and every subscriber opens artwork built from their own merge fields, rendered at the moment they read it.