Skip to main content

​
Overview

The image element allows you to embed images into your notifications. Images can be aligned, sized, linked, and include alt text for accessibility. When to use:
  • Display logos, product images, or illustrations
  • Add visual elements to enhance notifications
  • Create clickable image banners
  • Include user avatars or profile pictures

​
Basic Example

{
  "type": "image",
  "src": "https://example.com/logo.png"
}

​
Fields

​
type
string
required
The type of element. For image elements, this value must be "image".
​
src
string
required
The source URL of the image. Must be a publicly accessible URL or a URL from your Asset Manager.
​
alt_text
string
Alternate text for the image. Used by screen readers and displayed when the image cannot be loaded. Important for accessibility.
​
href
string
A URL to link to when the image is clicked. Makes the image clickable.
​
width
string
CSS width properties to apply to the image. Can be:
  • Fixed: "200px", "300px"
  • Percentage: "50%", "100%"
  • Auto: "auto"
​
align
string
The alignment of the image. One of "center", "left", "right", or "full". Defaults to "center".
​
locales
object
Region-specific content for localization. Can localize src (image URL) and href (link URL). See the Locales documentation for more details.
​
channels
string[]
An array of channel names. The image will only be rendered for the specified channels. See Control Flow documentation for details.

​
Examples & Variants

​
Basic Image

Simple image with alt text: 
{
  "type": "image",
  "src": "https://example.com/logo.png",
  "alt_text": "Company Logo"
}

​
Clickable Image

Image that links to a URL: 
{
  "type": "image",
  "src": "https://example.com/banner.jpg",
  "alt_text": "Special Offer",
  "href": "https://example.com/sale",
  "width": "100%"
}

​
Sized and Aligned Image

Control image size and alignment: 
{
  "type": "image",
  "src": "https://example.com/product.png",
  "alt_text": "Product Image",
  "width": "200px",
  "align": "center"
}

​
Localized Image

Use different images for different locales: 
{
  "type": "image",
  "src": "https://example.com/welcome-en.png",
  "alt_text": "Welcome",
  "href": "https://example.com/dashboard",
  "locales": {
    "es": {
      "src": "https://example.com/welcome-es.png",
      "href": "https://example.com/es/dashboard"
    },
    "fr": {
      "src": "https://example.com/welcome-fr.png",
      "href": "https://example.com/fr/dashboard"
    }
  }
}

​
Channel-Specific Image

Show different images per channel: 
{
  "type": "image",
  "channels": ["email"],
  "src": "https://example.com/email-banner.jpg",
  "alt_text": "Email Banner",
  "width": "100%"
},
{
  "type": "image",
  "channels": ["push"],
  "src": "https://example.com/push-icon.png",
  "alt_text": "Notification Icon"
}

​
Full-Width Banner

Full-width banner image: 
{
  "type": "image",
  "src": "https://example.com/banner.jpg",
  "alt_text": "Promotional Banner",
  "href": "https://example.com/promo",
  "width": "100%",
  "align": "full"
}

​
Best Practices

  • Always include alt text: Essential for accessibility and when images fail to load
  • Use appropriate sizes: Optimize images for email (typically max 600px width)
  • Use HTTPS URLs: Ensure image URLs use HTTPS for security
  • Consider channel differences: Images may render differently in email vs push notifications
  • Optimize file sizes: Large images can slow down email loading
  • Test image loading: Verify images are publicly accessible and load correctly

​
Channel Support

  • Email: ✅ Full support with alignment, sizing, and linking
  • Push: ✅ Supported (typically as notification icon or banner)
  • SMS: ❌ Not supported (text-only channel)
  • Inbox: ✅ Full support