Image

Add images with captions, links, and responsive sizing

Display images with automatic optimization, responsive sizing, and optional captions. Supports various formats and includes built-in lazy loading.

Quick Reference

• Formats: JPG, PNG, GIF, WebP, SVG

• Sources: Upload, URL, or media library

• Optimization: Auto-compression and responsive sizes

• Features: Caption, alt text, link, alignment

• Performance: Lazy loading by default

Adding Images

Method 1: Drag from Right Sidebar

1. Click the Media category in the right sidebar

2. Find Image in the dropdown

3. Drag it onto your page where you want it

4. Click the image placeholder to open the image picker

Method 2: Slash Command

1. Type /image on empty line

2. Image picker opens

3. Choose source and select image

Method 3: Drag and Drop

1. Drag image file onto editor

2. Auto-uploads and inserts

3. Progress bar shows upload

Method 4: Paste

1. Copy image (file or URL)

2. Paste in editor

3. Auto-detects and adds

Image Picker

The image picker opens with three tabs:

Unsplash Tab

• Search millions of free photos

• Professional stock imagery

• Auto-attribution included

Upload Tab

• Drag and drop files

• Or click to browse

• Shows upload progress

On prospect pages, the uploaded images tab will include folders to browse images from Your Brand and the Buyer Brand.

Dynamic & Brand Images (Templates Only)

• {{BUYER_LOGO}} - Displays recipient organization's logo

• {{PROFILE_IMAGE}} - Displays recipient user's profile photo

• Pre-approved brand images and assets (configured in Account Branding)

• Ensures consistent visual identity

Configuration

Display Options

• Link: Make image clickable

• Alignment: Left, center, right

Resizing

• Drag Handles: Click into the image edges to see resize handles

• Corner Handles: Drag to resize while maintaining aspect ratio

Shape Masking

Transform your image shape:

• Square: Default rectangle

• Circle: Perfect circle crop

• Ellipse: Oval shape

• Parallelogram: Slanted edges

• Triangle: Pointed top

• Star: Star cutout

Access via shape icon in menubar.

Common Use Cases

Hero Images

• Full-width backgrounds

• High loading priority

• Optimized for impact

Product Photos

• Gallery layouts

• Zoom on click

• Multiple angles

Screenshots

• Border styling

• Annotations

• Click to enlarge

Logos

• SVG format preferred

• Transparent backgrounds

• Consistent sizing

Decorative Images

• Supporting visuals

• Break up text

• Empty alt text

Best Practices

• Optimize before upload: Max 2MB recommended

• Choose right format: JPG for photos, PNG for graphics

• Test on mobile: Ensure proper scaling

Image Optimization

Automatic Processing

• Resizes for different screens

• Compresses without quality loss

• Creates thumbnail sizes

Format Guidelines

• JPG: Photos, complex images

• PNG: Graphics, transparency needed

• SVG: Logos, icons, simple graphics

• GIF: Simple animations only

• WebP: Auto-generated for browsers

Design Tips

1. Sizing

   • Use consistent dimensions

   • Avoid mixing orientations

   • Consider mobile viewports

2. Placement

   • Balance text and images

   • Use white space effectively

   • Align with content flow

3. Quality

   • High resolution for retina

   • Consistent style/filters

   • Professional photography

4. Columns

   • Use in columns to have text and images size by size

   • Columns can have the entire column be a scalable image

Related Features

• Slideshow: Multiple image layouts

• Video: For moving content

• Embed: External image services

• Card: Images with text overlay