How to Add Dynamic Images in HubSpot

HubSpot knows more about each contact than most ESPs: lifecycle stage, company, owner, deal value, the city on the record. Almost all of that stays in the copy, because the only place a personalization token usually lands is a greeting line. A dynamic image moves it into the artwork. One image URL, resolved per contact at the moment they open, with their name set into the design or the hero swapped by their city’s weather.

HubSpot dynamic images work the way a countdown timer does, with one extra step: the image URL carries parameters, and you fill each one with a personalization token. The catch is where you paste it. HubSpot has three ways to put an image in an email, and only one of them lets a token through.

Step 1: Build the image in Alterable

1. Open the dynamic image tool and design the artwork, adding a variable wherever a contact’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 wrapped around the image, with one parameter per variable, and Alterable leaves 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 HubSpot tokens

Replace each MERGE_TAG with the matching personalization token:

<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={{ contact.firstname }}" />
</a>

Two details to get right:

• Use the internal property name. firstname is one word, and a custom property’s internal name is often not the label you see in the UI. {{ contact.First Name }} fails without an error, so look the name up in the property settings rather than guessing from the label.
• Set a default when you insert the token, so a contact missing that property still gets a sensible image rather than one built from an empty parameter.

Step 3: Add it to your HubSpot email

1. Open the email in HubSpot’s drag-and-drop editor.

2. In the Add tab on the left, click More.

3. Drag the HTML - email module into the layout.

4. Click the module, and in the Content tab paste your image tag into the HTML field.

5. Position it and save.

It has to be the HTML module. Tokens resolve inside raw HTML, which is what lets one sit in a src attribute. The image module takes a file, not a URL with tokens in it. And HubSpot’s CTA tool URL-encodes tokens rather than substituting them, so it turns {{ contact.firstname }} into %7B%7B%20contact... and produces a broken link instead of a personalized image. That third route is the one people try first, because it looks like the obvious place for a clickable image.

Checking it against a real contact

HubSpot only fills tokens when it knows which contact it’s rendering for, so the editor shows the raw tag and the image looks broken until you preview properly. Click Preview, choose Preview as contact, and pick a real record. The token resolves and the image draws with that person’s data. Then pick a second contact who is missing the property, because that contact exists in every list, and confirm the default you set is what appears.

A test send to yourself only proves your own record works. It’s the contact with gaps who tells you whether the setup is finished.

Automated emails for workflows are built in the same editor, so the module and the token behave identically there. And because the image is rendered when it’s requested rather than when it’s sent, a contact who opens the same email twice gets it re-rendered against whatever is true at that moment, which is what makes weather and stock conditions worth setting up at all.