Dynamic Images
Display personalized product recommendations, dynamic maps, user avatars, and customized hero banners.
Key Takeaways
- Bind image source URLs to dynamic variables: {{product.imageUrl}}.
- Always configure a reliable static fallback image URL for missing data.
- Dynamic images must maintain consistent aspect ratios to prevent layout distortion.
- Include dynamic alt text: alt="{{product.name}}".
Binding Image Sources#
Select any Image block on the canvas. In the right panel, paste a variable into the Source URL field:
Or use the fallback helper for a safe placeholder image:
Make sure to set explicit image dimensions (width="200px") so that images of varying resolutions fit your layout without breaking surrounding columns.
Maintaining Consistent Aspect Ratios#
When injecting dynamic images into multi-column layouts (like product cards in a 2-column or 3-column grid):
- Ensure all uploaded images share identical aspect ratios (e.g., 1:1 square or 4:3 landscape).
- If one dynamic image is 600x600 and the neighboring one is 600x1200, the columns will become uneven, causing misaligned CTA buttons underneath.
- Always pair dynamic images with dynamic
alttext:alt="{{product.name}}"for accessibility.
Frequently Asked Questions
What happens if a dynamic image URL is broken or returns a 404?
Email clients will display a broken image icon alongside your specified alt text. Test your image URLs thoroughly or use an image proxy service to serve fallback graphics.
Can I dynamically change image widths?
We strongly recommend keeping the image width attribute static in the template to avoid Outlook layout distortion, while binding only the src and alt attributes dynamically.