Which HubSpot tokens can I pass into the image?

Any contact property, written as {{ contact.firstname }}. Custom properties work the same way using their internal name, which is not always the label you see in the UI.

Why an HTML module rather than the CTA or image module?

Tokens resolve inside raw HTML, so an HTML - email module lets you put one in the src attribute. HubSpot's CTA tool URL-encodes tokens instead of substituting them, which is why that route does not work.

What if a contact is missing the property?

Set a default on the token when you insert it. Without one the parameter arrives empty and the image renders without that piece.

Does the image update if they open it twice?

Yes. The image is rendered when it is requested, so a second open re-renders it against current conditions rather than showing what was true at send.

HubSpot Dynamic Images: Add Them in Minutes

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. HubSpot already holds that on the contact record. This guide connects the two.

The mechanism is the same one you use for a countdown timer. The difference is that the URL carries parameters, and you replace those values with personalization tokens so each open renders against that contact’s own data.

Why Use Dynamic Images in HubSpot?

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.
Any contact property – If it is on the record, it can go in the picture.
One image, one list – No building a variant per segment, and no per-city version of the same creative.

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 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. Check it in your 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.

Step 3: Add It to Your HubSpot Email

1. Open HubSpot and navigate to the Email Editor.

2. From the “Add” tab on the left, click “More”.

3. Drag the “HTML - email” block into your email template.

4. Click the “HTML - email” block, and in the “Content” tab on the left, paste your image tag into the “HTML” field.

5. Adjust the placement to fit your email layout.

6. Save and preview. HubSpot lets you preview as a specific contact, which is the fastest way to confirm the tokens resolve to that person’s data rather than to blanks.

It has to be the HTML module. Tokens resolve inside raw HTML, which is what puts one in a src attribute, and HubSpot’s CTA tool URL-encodes tokens rather than substituting them, so that route produces a broken link instead of a personalized image.

Best Practices for Dynamic Images in HubSpot

Always Set a Default – Decide what an unknown first name should say before you send, not after.
Preview as a Real Contact – A test to yourself only proves your own record works.
Verify the Internal Name – The label and the internal name drift apart on custom properties, and the token follows the internal name.
Keep Alt Text Dynamic Too – The alt text should describe the personalized image, not a generic one.
Check a Contact With Gaps – Preview against someone missing the property, because that contact exists in every list.

In short

HubSpot holds the data and Alterable renders the picture. Put the token in the URL from an HTML module, set a default for the contacts who are missing it, and every recipient opens artwork built from their own record at the moment they read it.

How to Add Dynamic Images in HubSpot