The Image element lets you add visual content to your funnels with automatic optimization for fast loading and perfect display across devices. Every image is compressed and served in the optimal format for maximum performance.
Image element configuration

​
When to Use

Essential for:
  • Product visuals - Show what users are buying
  • Social proof - Customer photos, logos, badges
  • Instructional content - Screenshots, diagrams
  • Emotional connection - Lifestyle imagery, transformations
  • Trust signals - Security badges, certifications
  • Visual breaks - Separate content sections

​
Adding Images

​
Upload Process

1

Add Image Element

Drag Image element onto your page
2

Upload File

Click upload or drag image file
  • Supported: JPG, PNG, GIF, WebP, SVG
  • Max size: 10MB (automatically compressed)
3

Automatic Optimization

FunnelFox automatically:
  • Compresses without quality loss
  • Converts to optimal format
  • Creates responsive versions
  • Enables lazy loading
Images are automatically optimized to load 50-70% faster while maintaining visual quality. No manual optimization needed.

​
Alt Text

Always add descriptive alt text:
  • Improves accessibility
  • Helps SEO
  • Shows if image fails to load
  • Required for screen readers
Good alt text examples:
  • “Before and after weight loss transformation”
  • “5-star customer review screenshot”
  • “Product box on white background”

​
Sizing & Display

​
Dimensions

Control image size: Width
  • Pixels: Fixed width (500px)
  • Percentage: Responsive (100%)
  • Auto: Natural image width
Height
  • Pixels: Fixed height (300px)
  • Auto: Maintain aspect ratio
  • Percentage: Relative to container
Use width: 100% and height: auto for responsive images that scale perfectly on all devices.

​
Object Fit

How image fills its container:
Fit TypeBehaviorUse Case
ContainFit entire imageLogos, diagrams
CoverFill containerBackgrounds, heroes
FillStretch to fitExact dimensions
Scale-downShrink if neededMixed content

​
Alignment

Position within container:
  • Center - Balanced positioning
  • Top/Bottom - Vertical alignment
  • Left/Right - Horizontal alignment

​
Visual Effects

​
Opacity

Adjust transparency:
  • 1.0 - Fully opaque
  • 0.7 - Slightly transparent
  • 0.3 - Heavy transparency
Use for:
  • Background images
  • Watermarks
  • Overlays
  • Subtle visuals

​
Border Radius

Round those corners:
  • 0px - Sharp edges
  • 8px - Slightly rounded
  • 16px - Modern cards
  • 50% - Circular (if square)
Perfect for:
  • Profile photos
  • Product cards
  • Testimonial images
  • Modern design

​
Shadows

Add depth:
  • Subtle elevation
  • Card-like appearance
  • Focus attention
  • Professional polish

​
Mobile Optimization

Images adapt intelligently: Responsive Sizing
  • Scale proportionally
  • Never exceed screen width
  • Maintain aspect ratio
  • Touch-friendly spacing
Performance
  • Lazy loading (load as needed)
  • Progressive enhancement
  • Compressed formats
  • CDN delivery
Quality Settings
  • Retina display support
  • Automatic format selection
  • WebP for modern browsers
  • Fallbacks for compatibility
Avoid images wider than 1200px for hero sections or 800px for content images. Larger images slow mobile loading without visual benefit.

​
Common Patterns

​
Hero Images

Width: 100%
Height: Auto
Object Fit: Cover
Alt: "Main product benefit visualization"

​
Product Showcase

Width: 400px
Height: Auto
Object Fit: Contain
Border Radius: 8px
Shadow: Enabled

​
Trust Badges

Width: 150px
Height: Auto
Alignment: Center
Alt: "SSL Secured checkout"

​
Before/After

Container (Row)
├── Image (Before)
│   Width: 50%
│   Alt: "Before transformation"
└── Image (After)
    Width: 50%
    Alt: "After transformation"

​
Logo Cloud

Container (Row)
├── Image (Logo 1) - Width: 20%
├── Image (Logo 2) - Width: 20%
├── Image (Logo 3) - Width: 20%
├── Image (Logo 4) - Width: 20%
└── Image (Logo 5) - Width: 20%

​
Image Strategy

​
Above the Fold

First screen priorities:
  • Hero image (emotional connection)
  • Trust badges (credibility)
  • Product preview (value visualization)
Keep minimal for fast loading.

​
Supporting Visuals

Throughout funnel:
  • Break up text
  • Illustrate benefits
  • Show social proof
  • Guide attention

​
Conversion Images

Near CTAs:
  • Product photos
  • Guarantee badges
  • Security icons
  • Payment methods

​
Performance Best Practices

​
File Optimization

Before upload:
  • Use appropriate dimensions
  • Choose right format:
    • JPG: Photos
    • PNG: Logos, transparency
    • SVG: Icons, simple graphics
    • GIF: Simple animations

​
Loading Strategy

Critical images
  • Above fold: Load immediately
  • Hero images: Prioritize quality
Supporting images
  • Below fold: Lazy load
  • Decorative: Lower priority

​
Mobile Considerations

  • Test on real devices
  • Check data usage
  • Verify load times
  • Ensure visibility

​
Accessibility

​
Alt Text Guidelines

  • Be descriptive, not redundant
  • Convey image purpose
  • Keep under 125 characters
  • Don’t start with “Image of…”

​
Decorative Images

For purely decorative images:
  • Leave alt text empty (alt="")
  • Screen readers skip these
  • Reduces audio clutter

​
Troubleshooting

​
Image Psychology

​
Trust Signals

  • Real photos over stock
  • Consistent style
  • Professional quality
  • Authentic scenarios

​
Emotional Triggers

  • Faces increase connection
  • Success outcomes inspire
  • Problems create urgency
  • Solutions provide relief

​
Visual Hierarchy

  • Largest image = most important
  • Bright images draw attention
  • Contrast creates focus
  • White space adds emphasis

​
Next Steps