Image Block
Add images to your email: product photos, hero banners, logos, and illustrations.
Properties
| Property | Options |
|---|---|
| Source | Image URL or upload |
| Alt text | Description shown when image doesn't load (required for accessibility) |
| Width | Pixels or percentage |
| Height | Auto (maintain ratio) or fixed pixels |
| Alignment | Left, Center, Right |
| Link | Optional; make the image clickable |
| Border radius | Corner rounding |
Image best practices for email
| Guideline | Why |
|---|---|
| Max width: 600px | Email containers are typically 600px wide |
| File size: under 200KB | Large images slow loading and may be blocked |
| Format: JPG for photos, PNG for graphics | Best compression for each use case |
| Always set alt text | Some clients block images by default; alt text is your fallback |
| Use retina images (2x) | Set display size to half the actual image dimensions for sharp rendering |
Warning
Some email clients (Outlook, corporate email) block images by default. Always design emails that make sense even without images; use alt text and don't rely solely on images for critical information.
Adding to your email
- Open the Blocks panel (left sidebar)
- Find this block in the list
- Drag it onto the canvas
- Drop it between existing blocks or inside a container
- Click to select and edit properties in the right sidebar
Styling
Click the block → open the Styles panel (right sidebar):
- Background color
- Padding and margin
- Border (width, style, color)
- Alignment
Email client compatibility
This block renders consistently across major email clients:
- Gmail (web + app): full support
- Apple Mail: full support
- Outlook 365: good support
- Outlook desktop: some CSS limitations (uses Word rendering engine)
- Yahoo Mail: good support
Accessibility
- Always set meaningful alt text for images
- Use sufficient color contrast (4.5:1 ratio minimum for text)
- Keep font sizes readable (14px+ for body text)
- Structure content with headings in logical order