How to display personalized images in emails reliably
You've built a beautiful personalized image. It shows the subscriber's name on a product, their points balance in the header, their nearest store on a map. Then you send it, and someone replies with a screenshot of a grey box.
Displaying personalized images in emails reliably is its own skill, separate from designing them. Email clients handle images differently, some readers block them, and privacy features change how images are requested. Here's what actually happens between "send" and "seen," and how to make sure your image shows up right.
How a personalized image reaches the reader
The email contains an image tag pointing to a web address with the subscriber's values in it. When the email is opened, the email client asks for that address. The image service, like Alterable, draws the image with those values and sends it back. The client displays it.
Each step is a place where something can go differently: the address might be wrong, the client might not ask, or something in between might change the request.
Image blocking
Some email clients and many corporate environments don't load images until the reader clicks "show images." Most consumer inboxes, like Gmail and Apple Mail, load them by default now, but desktop Outlook in business settings often doesn't.
You can't force images to load, so plan for readers who don't see them. Write alt text that makes sense without the image, like "Your rewards summary" rather than "hero_v3.png." Keep your headline and call to action as live text and real buttons. The personalized image should add to the email, not carry all of it.
Image proxies in Gmail and Apple Mail
Gmail doesn't fetch images directly from your image service. It requests them through Google's servers, partly for security and privacy. Apple Mail, with Mail Privacy Protection turned on, does something similar through Apple's servers and may load images when the email arrives, not only when it's read.
For personalized images based on your own data (names, balances, codes), this doesn't matter. The values are in the image address, so the proxy fetches exactly the right image.
It matters for anything worked out from the request itself, especially location. A proxy hides the reader's real IP address, so location detected at open may reflect the proxy, not the person. The fix is simple: pass the city or postal code you already store as a parameter, and treat detected location as a fallback.
Email client rendering
A personalized image is a normal image, so it displays in every major email client: Gmail, Apple Mail, Outlook, Yahoo, and the mobile apps. A few details still matter.
Set a width in your HTML that matches your layout, and let the height scale. Desktop Outlook in particular respects fixed table widths and can stretch images that don't have one.
Use images with enough resolution to look sharp on high-density phone screens, and set the display width in HTML.
Dark mode can change the colors around your image. Give personalized images a solid background, not a transparent one, so text in the image doesn't disappear against a darkened email.
Missing and messy data
This is the most common reason personalized images look wrong. A subscriber has no first name. A city field says "N/A." A name was typed in all caps. A points balance never synced.
Set a default for every variable, so a missing name becomes "there" or disappears gracefully. Choose fonts that support accented characters. Control how long values fit (shrink, wrap, or truncate) so "Maximilian-Alexander" doesn't run off the edge. And encode values in the URL so names with spaces or apostrophes don't break the address.
Alterable lets you set fallbacks per variable and control how text fits its box, which covers most of these cases in the design itself.
Merge tag mistakes
If every subscriber sees the default, the merge tag probably isn't filling in. Check that the tag matches your platform's field exactly, including capitalization, and that the embed is in an HTML block rather than a standard image block. Most standard image blocks don't process merge tags inside the address.
If the image is broken only in test emails, relax. Many platforms don't fill contact-specific merge tags in test sends. Preview with real contacts instead.
Testing checklist
- A normal contact with complete data
- A contact missing each field the image uses
- A long name and an accented name
- Gmail on mobile, Apple Mail, and desktop Outlook
- Dark mode on a phone
- Images turned off, to check alt text and live text
Why Alterable images display reliably
Alterable delivers every personalized image as a standard image, with no JavaScript and nothing unusual for email clients to choke on. It handles fallbacks, text fitting, and delivery through a fast CDN, and it's built with Gmail and Apple Mail proxies in mind. Countdown timers render as still images of the exact time left, so they look the same in desktop Outlook as everywhere else.
The free plan includes personalized images with 10,000 impressions a month and no watermark. Build one at alterable.com, run it through the checklist above, and you'll know exactly what every subscriber will see.