Chapter 5: Image Elements
Image elements bring visual content to your video templates. This chapter covers how to add, configure, and optimize images in FX Express.
Adding Images
To add an image element:
- Click Image in the element palette (or drag it to the canvas)
- An image picker dialog opens
- Select or upload your image
- The image appears on the canvas
Image Sources
FX Express supports various image sources:
Upload from Computer
- Click “Upload” in the image picker
- Select an image file from your device
- Supported formats: PNG, JPG, JPEG, GIF, SVG, WebP
From URL
- Paste an image URL directly
- The image will be loaded from the remote source
- Ensure the URL is publicly accessible
Stock Images
Browse and select from integrated stock image libraries (when available).
AI Generated
Generate images using AI tools (when available):
- Describe the image you want
- AI generates options
- Select your preferred result
Image Properties
Source (src)
The URL or path to the image file. You can change this to replace the image.
Alt Text
Alternative text for accessibility:
- Describes the image content
- Used by screen readers
- Good practice for all images
Object Fit
Controls how the image fills its container:
| Mode | Behavior |
|---|---|
| Cover | Fills the entire area, cropping if necessary (default) |
| Contain | Fits entire image within area, may show background |
| Fill | Stretches to fill area exactly, may distort |
Cover Mode
- Best for: Background images, full-bleed photos
- Crops portions of the image to fill the frame
- Maintains aspect ratio
- Use with Focus Point to control what’s visible
Contain Mode
- Best for: Logos, icons, product images
- Shows the entire image
- May show background color around edges
- Never crops the image
Fill Mode
- Best for: When exact dimensions matter
- Stretches/compresses to fit exactly
- May distort aspect ratio
- Use sparingly
Focus Point
When using Cover mode, the focus point controls which part of the image remains visible:
Setting Focus Point
- Select the image element
- Click the crosshair icon (🎯) in the toolbar
- Focus mode activates
- Click and drag on the image to set the focus point
- Click elsewhere to confirm
Focus Point Coordinates
- X: Horizontal position (0% = left edge, 100% = right edge)
- Y: Vertical position (0% = top edge, 100% = bottom edge)
- Default: 50%, 50% (center)
Common Focus Point Uses
| Subject | Recommended Focus |
|---|---|
| Portrait (face) | Center on the face (usually 50%, 30-40%) |
| Product | Center on the product |
| Landscape | Horizon line or point of interest |
| Text in image | Center on the text |
The Image Toolbar
When you select an image, a floating toolbar appears above it:
| Button | Function |
|---|---|
| Replace image | Open picker to choose a different image |
| Cover (📐) | Set object-fit to cover |
| Contain (📦) | Set object-fit to contain |
| Fill (⬜) | Set object-fit to fill |
| Focus (🎯) | Enter focus point editing mode |
| AI Edit (✨) | Open AI image editing tools |
| Timing (🕐) | Open element timing dialog |
| Delete (🗑) | Remove the image element |
| Lock (🔒) | Lock element position and size |
Replacing Images
To replace an image without changing its position or settings:
- Select the image
- Click “Replace image” in the toolbar
- Choose a new image
- The new image appears with the same size and position
This is useful when updating content while preserving layout.
AI Image Editing
FX Express integrates AI tools for image manipulation:
Available AI Features
- Remove background: Isolate subjects from backgrounds
- Enhance: Improve image quality
- Expand: Extend image boundaries
- Edit: Make specific changes via prompts
Using AI Edit
- Select the image
- Click the sparkle icon (✨)
- Choose an AI operation
- Follow prompts to complete the edit
Image Sizing Best Practices
Resolution Recommendations
| Use Case | Recommended Resolution |
|---|---|
| Full-screen background | 1920×1080 or higher |
| Half-screen image | 960×540 minimum |
| Thumbnail/icon | 256×256 minimum |
| Logo | Vector (SVG) when possible |
File Size Optimization
- Compress images before uploading
- Use appropriate formats (JPG for photos, PNG for graphics)
- Avoid unnecessarily large files
- Consider WebP for better compression
Aspect Ratios
- Match image aspect ratio to element aspect ratio when possible
- Use Cover mode when ratios don’t match
- Set focus point to preserve important content
Animating Images
Images can be animated using the timeline:
Entry Animations
- Fade in
- Scale up/down
- Slide from direction
- Zoom and pan (Ken Burns effect)
Transform Animations
- Position changes
- Size changes
- Rotation
- Opacity changes
Creating a Ken Burns Effect
- Set initial position/size keyframe
- Set ending position/size keyframe
- The image slowly pans/zooms during playback
See Chapter 12: Animations and Keyframes for details.
Image Layout Tips
Background Images
For full-screen backgrounds:
- Set position to 0%, 0%
- Set size to 100%, 100%
- Use Cover mode
- Set Z-Index to lowest value
Centered Images
For centered content:
- Calculate position based on size
- Or use alignment tools
- Consider Contain mode for full visibility
Image Grids
For multiple images:
- Plan your grid layout
- Calculate percentage positions
- Keep consistent spacing
- Use same aspect ratios when possible
Troubleshooting
Image Not Loading
- Check if the URL is accessible
- Verify the file format is supported
- Check for CORS restrictions on remote images
- Try re-uploading the image
Image Looks Blurry
- Source image may be too low resolution
- Increase source image size
- Avoid upscaling small images significantly
Image Is Cropped Unexpectedly
- Check Object Fit mode (Cover crops by design)
- Adjust Focus Point to show desired area
- Switch to Contain mode to see full image
- Adjust element size to match image aspect ratio
Image Colors Look Wrong
- Browser color management may differ
- Check if image has embedded color profile
- Test in final export for accurate colors
Image Won’t Replace
- Ensure you’re clicking the toolbar button
- Check file format compatibility
- Try uploading instead of URL
Image Performance
Optimization Tips
- Pre-resize images to needed dimensions
- Use appropriate compression
- Avoid animated GIFs for large areas
- Consider video for motion content
Memory Considerations
- Very large images consume more memory
- Multiple high-res images may slow preview
- Optimize images for web use