Image Block

The Image block allows you to add images, photos, logos, and graphics to your email templates. Images are essential for branding, visual appeal, and conveying information in emails.

Adding an Image Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Image” or find it in the “Media” category
3. Click to insert the block
4. Choose how to add your image:
   • Upload: Upload an image from your computer
   • Media Library: Select an existing image from your media library
   • Insert from URL: Enter an image URL directly

Image Settings

Image Source

You can set images in several ways:

Static Images

• Upload or select from media library
• Use a fixed image URL
• Image remains the same for all emails

Dynamic Images with Merge Tags

• Use merge tags to insert dynamic images
• Example: {field:5} where field 5 contains an image URL
• Image changes based on form submission or entry data

Default Image

• Set a default image that displays if the merge tag is empty
• Useful fallback when dynamic image data is not available

Alt Text

Always add descriptive alt text to your images:

• Accessibility: Screen readers use alt text to describe images
• Fallback: Alt text displays if images fail to load
• SEO: Alt text helps with email accessibility and understanding

Best Practice: Write clear, descriptive alt text that explains what the image shows or its purpose.

Caption

Add a caption below the image:

• Provides context or additional information
• Helps explain the image’s purpose
• Can include merge tags for dynamic captions

Title Attribute

Set a title attribute for the image (appears on hover in some email clients).

Alignment

Control how the image is positioned:

• Left: Image aligns to the left, text wraps around it
• Center: Image is centered (default, recommended for email)
• Right: Image aligns to the right, text wraps around it

Email Best Practice: Center alignment is most reliable across email clients.

Image Size

Width and Height

Control the dimensions of your image:

• Width: Set the image width (recommended for email)
• Height: Set the image height (optional, maintains aspect ratio)
• Aspect Ratio: Maintain original proportions

Email Best Practice:

• Set explicit width (e.g., 600px for full-width emails)
• Let height adjust automatically to maintain aspect ratio
• Avoid very large images (optimize for email)

Size Slug

Choose from predefined image sizes:

• Thumbnail
• Medium
• Large
• Full Size

Links

Link Destination

Make your image clickable:

• None: Image is not a link
• Custom URL: Link to any URL
• Media File: Link to the full-size image
• Attachment Page: Link to the attachment page

Link Target

• Same Window: Link opens in the same window/tab
• New Tab: Link opens in a new browser tab/window

Link Rel

Set relationship attributes:

• nofollow: Tell search engines not to follow the link
• noopener: Security attribute for links opening in new tabs

Merge Tags for Images

Using Merge Tags

You can use merge tags to insert dynamic images:

1. Select the Image block
2. In the block settings, find the merge tag option
3. Enter a merge tag (e.g., {field:5} for a form field containing an image URL)
4. The image will be pulled from the field value when the email is sent

Common Use Cases

• Profile Photos: Display user profile images
• Product Images: Show product photos from orders
• Uploaded Files: Display files uploaded through forms
• Dynamic Graphics: Show different images based on form data

Default Image

Set a default image that displays if:

• The merge tag is empty
• The field has no value
• The image URL is invalid

Styling Options

Borders

Add borders to your images:

• Border Color: Choose a border color
• Border Width: Set border thickness
• Border Radius: Round the corners (limited support in email)

Background

Set a background color (useful for transparent images or placeholders).

Email-Safe Image Practices

Image Optimization

1. File Size: Keep images under 1MB (ideally under 200KB)
2. Dimensions: Use appropriate dimensions (e.g., 600px width for email)
3. Format: Use JPEG for photos, PNG for graphics with transparency
4. Compression: Compress images before uploading

Hosting

1. Reliable Hosting: Host images on a reliable server
2. HTTPS: Use HTTPS URLs for images
3. CDN: Consider using a CDN for faster loading
4. Absolute URLs: Always use absolute URLs (full URLs, not relative paths)

Email Client Compatibility

1. Test in Multiple Clients: Test images in Gmail, Outlook, Apple Mail, etc.
2. Fallback Alt Text: Always include descriptive alt text
3. Background Images: Limited support, use with caution
4. CSS Images: Some email clients don’t support CSS background images

Best Practices

1. Optimize Images: Compress and resize images before uploading
2. Use Alt Text: Always include descriptive alt text
3. Center Alignment: Center images for best email client compatibility
4. Set Width: Explicitly set image width for consistent rendering
5. Test Loading: Ensure images load quickly and reliably
6. Mobile-Friendly: Test how images appear on mobile devices
7. Use Merge Tags: Leverage merge tags for dynamic images when needed
8. Default Images: Set default images as fallbacks for dynamic content

Examples

Example 1: Logo Header

Goal: Add a company logo at the top of the email

• Image: Company logo
• Alignment: Center
• Width: 200px (or appropriate logo size)
• Alt Text: “Company Name Logo”
• Link: Company website URL

Example 2: Product Image

Goal: Display a product image from an order

• Image Source: Merge tag {product_image}
• Default Image: Placeholder product image
• Alignment: Center
• Width: 300px
• Alt Text: “Product: {product_name}”
• Link: Product page URL

Example 3: User Profile Photo

Goal: Display user’s profile photo

• Image Source: Merge tag {user:avatar_url}
• Default Image: Generic avatar placeholder
• Alignment: Center
• Width: 100px
• Border Radius: 50% (circular, if supported)
• Alt Text: “Profile photo”

Troubleshooting

Image Not Displaying

• Verify the image URL is correct and accessible
• Check that the image is hosted on a reliable server
• Ensure the URL uses HTTPS
• Test the image URL in a browser
• Check for broken merge tags

Merge Tag Not Working

• Verify merge tag syntax is correct
• Check that the field contains a valid image URL
• Test with actual data to confirm the tag resolves
• Ensure the data source is configured correctly
• Set a default image as fallback

Image Too Large

• Optimize the image file size
• Resize the image to appropriate dimensions
• Use image compression tools
• Consider using a CDN for image delivery

Alignment Issues

• Some email clients have limited alignment support
• Center alignment is most reliable
• Test in multiple email clients
• Avoid complex layouts with images

Mobile Display Issues

• Ensure images are appropriately sized for mobile
• Test on actual mobile devices
• Consider responsive image techniques
• Use explicit widths for consistent rendering

Images Blocked

• Some email clients block images by default
• Always include descriptive alt text
• Consider that users may have images disabled
• Design emails that work with and without images