Appearance

Adding Images ​

Learn how to add, manage, and adjust images in your storyboard beats.

Adding Images to Beats ​

The fastest way to add images:

Single Image:

  1. Open your file explorer (Windows Explorer, macOS Finder)
  2. Find your image file
  3. Drag the image from file explorer
  4. Drop it directly onto a beat node

Multiple Images (Bulk Import):

  1. Select multiple images in file explorer (Ctrl+Click or Cmd+Click)
  2. Drag them all onto the canvas (not on a beat)
  3. EmberBoard automatically creates a beat for each image
  4. Images are arranged in a 3-column grid layout

Features:

  • All images are automatically resized to 1920×1080 max for optimal performance
  • Works with desktop, folders, or cloud storage
  • Perfect for importing storyboard sequences

Method 2: Browse Button ​

For a traditional file picker:

  1. Click a beat to select it
  2. In the Properties Panel (right side)
  3. Click the Browse button
  4. Choose an image file from your computer
  5. Image loads into the selected beat

Method 3: Paste from Clipboard ​

Quick workflow from other apps:

  1. Copy an image in another application (Ctrl+C / Cmd+C)
    • From Photoshop, web browser, etc.
  2. Select a beat in EmberBoard
  3. Paste with Ctrl+V (Cmd+V on Mac)
  4. Image appears in the beat

Tip: This is perfect for screenshots or images you're working with in another app.

Supported Image Formats ​

EmberBoard supports all common web image formats:

FormatExtensionNotes
PNG.pngBest for graphics, screenshots, transparency
JPEG.jpg, .jpegBest for photos, smaller file size
GIF.gifAnimated GIFs show first frame only
WebP.webpModern format, excellent compression
SVG.svgVector graphics (limited support)

Recommended:

  • Use PNG for storyboard sketches and graphics
  • Use JPEG for photographs
  • Use WebP for best balance of quality and file size

Automatic Image Optimization ​

✨ EmberBoard automatically optimizes images on import!

What Happens Automatically ​

When you import an image (via drag-drop, browse, or paste), EmberBoard:

  1. Resizes large images to max 1920×1080 (maintains aspect ratio)
  2. Compresses to 85% quality (excellent balance of quality/size)
  3. Converts large PNGs to JPEG for better compression
  4. Only resizes if needed - small images stay untouched

Benefits:

  • ⚡ Better performance during playback
  • 💾 Reduces browser storage usage
  • 📦 Smaller project file sizes
  • 🚀 Faster load times

Original File Size Recommendations ​

You can import any size, but for best results:

  • Any resolution - Will be auto-resized if over 1920×1080
  • Original quality - Keep your source images high quality
  • Large files OK - EmberBoard handles the optimization

Before optimization (what you see):

  • Browser storage limits (~50-100MB total)
  • Large images can slow down import

After optimization:

  • Optimized images typically 100KB - 500KB each
  • Much better storage efficiency
  • Smooth playback performance

Adjusting Images in Output Window ​

Once an image is loaded, you can zoom and position it in the Output Window:

Zooming ​

  • Scroll wheel up - Zoom in
  • Scroll wheel down - Zoom out
  • Zoom levels: 1.0x, 1.5x, 2.0x, 2.5x, 3.0x

Panning ​

When zoomed in:

  • Click and drag to reposition the image
  • Move it to frame the important part

Reset ​

  • Click the Reset button (appears when zoomed/panned)
  • Returns to default zoom and position

Use case: Crop into a specific part of a wider image without editing the file.

Replacing Images ​

Replace in Properties Panel ​

  1. Select the beat
  2. Click Browse button
  3. Choose new image
  4. Old image is replaced

Replace via Drag and Drop ​

  1. Drag new image from file explorer
  2. Drop onto beat that already has an image
  3. Confirms replacement
  4. New image replaces old one

Undo if Needed ​

  • Ctrl+Z to restore previous image
  • EmberBoard remembers your last 50 actions

Removing Images ​

Remove from Beat ​

  1. Select the beat
  2. In Properties Panel, click Remove Image button
  3. Image is removed, beat remains

Note: You can have beats without images (script-only beats).

Remove Beat Entirely ​

  • Delete or Backspace key
  • Removes the entire beat (image + script + everything)

Multiple Images Workflow ​

Adding Many Images at Once ​

Drag multiple files:

  1. Select several images in file explorer (Ctrl+Click / Cmd+Click)
  2. Drag them all into EmberBoard Node View
  3. EmberBoard creates a beat for each image automatically
  4. Arrange them in the order you want

Perfect for:

  • Importing existing storyboard frames
  • Photo sequences
  • Reference images

Batch Processing Tips ​

  1. Name files sequentially before importing:
    • 01_opening_shot.png
    • 02_hero_enters.png
    • 03_close_up.png
  2. Drag all at once
  3. EmberBoard preserves filename order
  4. Beats are created in sequence

Image Storage ​

Where Images are Stored ​

In browser (auto-save):

  • Images stored in IndexedDB as blob URLs
  • Automatically optimized and saved with your project
  • Limited by browser storage quota (~50-100MB)

In project files (manual save):

  • Optimized images embedded as base64 data
  • Included in .emberboard file
  • No external dependencies

Both systems:

  • Store optimized images (max 1920×1080)
  • Maintain excellent visual quality (85% compression)
  • Balance quality with file size for best performance

Troubleshooting Images ​

Image Won't Load ​

Error message in Output Window:

Possible causes:

  • File format not supported
  • File corrupted or incomplete
  • File too large (>10MB)
  • Browser storage full

Solutions:

  1. Check file format (PNG, JPG recommended)
  2. Try smaller file size (resize/compress)
  3. Re-export image from source app
  4. Clear browser cache and try again

Image Looks Pixelated ​

Image appears blurry or low quality

Causes:

  • Source image resolution too low
  • Over-zoomed in Output Window

Solutions:

  • Use higher resolution source image
  • Export at 1920×1080 or higher
  • Reset zoom in Output Window

Storage Quota Exceeded ​

Can't add more images - storage full

Solutions:

  1. Reduce image file sizes (resize before importing)
  2. Remove unused beats
  3. Save project file and clear browser storage
  4. Use smaller image format (JPEG instead of PNG)

Image Appears Stretched ​

Image doesn't fit properly in frame

Cause:

  • Image aspect ratio doesn't match project setting

Solutions:

  • Crop image to match aspect ratio before import
  • Or use zoom/pan controls to frame it properly
  • Adjust project aspect ratio (Settings menu)

Best Practices ​

Before Importing ​

  1. Resize large images - No need! EmberBoard auto-resizes to 1920×1080
  2. Compress photos - No need! Auto-compressed at 85% quality
  3. Name files descriptively (hero_reveal.png not IMG_1234.png)
  4. Organize in folders by scene/sequence

During Workflow ​

  1. Add placeholders early (grey boxes, simple sketches)
  2. Replace with final art later
  3. Use zoom/pan instead of re-editing files
  4. Color code beats for easy visual organization

File Management ​

  1. Keep original high-res images as backups
  2. Create web-optimized versions - EmberBoard does this automatically!
  3. Import originals directly - they'll be optimized on import
  4. Save project files regularly

Next Steps ​