Image Element

Image elements display pictures in your survey without requiring a response. Use them for visual context, product images, diagrams, and branding.

When to Use

Image elements are ideal for:

• Visual context - Show what you’re asking about
• Product images - Display items for feedback
• Diagrams - Explain processes or concepts
• Instructions - Visual guides
• Branding - Logos, graphics

Adding an Image Element

1. Click Add Question in the survey editor
2. Select Image (under Display Elements)
3. Upload or enter image URL
4. Configure display options
5. Add alt text for accessibility

Configuration Options

Image Source

Upload file:

• Drag and drop
• Browse files
• Supported: JPG, PNG, GIF, WebP, SVG

Image URL:

• External hosted image
• Must be HTTPS
• Publicly accessible

Display Options

Size:

• Small (25% width)
• Medium (50% width)
• Large (75% width)
• Full width (100%)
• Custom dimensions

Alignment:

• Left
• Center
• Right

Border:

• None
• Thin border
• Rounded corners
• Shadow

Clickable Image

Make image clickable:

Link to URL:

• Opens in new tab
• External resources
• Larger version

Lightbox:

• Click to enlarge
• View full resolution
• Close to return

Alt Text

Required for accessibility:

• Describe the image
• Be concise but informative
• Screen reader compatible

Good alt text:

"Screenshot of dashboard showing sales graph"
"Product packaging for Model XYZ"
"Step 3: Click the Submit button"

Best Practices

Image Quality

Resolution:

• High enough for clarity
• Not excessively large
• Consider retina displays

File size:

• Optimize for web
• Under 500KB recommended
• Compress without quality loss

Format:

• JPG for photos
• PNG for graphics/screenshots
• SVG for logos/icons
• GIF for animations

Sizing

Match purpose:

• Product images: Medium-large
• Diagrams: Large or full width
• Icons: Small
• Context images: Medium

Consider mobile:

• Test on small screens
• Responsive sizing
• Readable text in images

Placement

Before related questions:

[Image of Product A]
"How would you rate this product?"

With instructions:

"Follow the steps shown below:"
[Diagram of process]

Section headers:

[Decorative image]
"Section 2: Your Preferences"

Common Use Cases

Product Feedback

[Product image]

Please review the product shown above and answer the following questions.

How appealing is this design?
○ Very appealing
○ Somewhat appealing
○ Not appealing

Screenshot Reference

[Screenshot with arrow pointing to feature]

The image above shows the new export feature. Based on what you see:

How easy does this feature look to use?

Concept Testing

[Logo option A]
[Logo option B]

Which logo design do you prefer?
○ Option A
○ Option B
○ No preference

Visual Instructions

[Step-by-step diagram]

Refer to the image above to complete the following:

Which step are you currently on?

Brand Identity

[Company logo]

Customer Satisfaction Survey

Thank you for being a valued customer. Please share your feedback.

Process Diagram

[Flowchart of support process]

Based on your understanding of our support process shown above:

How clear is this process?

Advanced Features

Conditional Display

Show different images based on conditions:

Display logic:

If Product = "Model A":
  Show: model-a-image.jpg

If Product = "Model B":
  Show: model-b-image.jpg

Image Maps

Create clickable regions:

• Define hotspots
• Link to different actions
• Track clicks

Dynamic Images

Change based on variables:

• Personalized images
• URL parameters
• Previous answers

A/B Testing

Test different images:

• Randomize image shown
• Track impact on responses
• Compare engagement

Image Optimization

File Compression

Tools:

• TinyPNG
• ImageOptim
• Squoosh

Target sizes:

• Hero images: <200KB
• Product images: <100KB
• Icons: <20KB

Responsive Images

Multiple sizes:

• Mobile: 640px wide
• Tablet: 1024px wide
• Desktop: 1920px wide

Auto-optimization:

• System resizes for device
• Serves appropriate size
• Faster loading

Loading Performance

Lazy loading:

• Load when in view
• Faster initial load
• Better experience

Placeholder:

• Show while loading
• Prevents layout shift
• Blurred preview

Accessibility

Alt Text

Always provide:

• Describes content
• Conveys purpose
• Meaningful to screen readers

Decorative images:

• Use empty alt=""
• Or mark as decorative
• Screen readers skip

Color Contrast

• Don’t rely only on images for information
• Provide text alternatives
• Test with color blindness simulators

Text in Images

Avoid or:

• Include in alt text
• Provide text version
• Ensure readability

Mobile Considerations

Responsiveness

• Images scale automatically
• Test on various sizes
• Check text legibility

Touch Targets

For clickable images:

• Large enough to tap
• Clear it’s tappable
• Appropriate spacing

Performance

• Optimize file sizes
• Consider mobile data
• Lazy load off-screen

Troubleshooting

Image Not Displaying

Common causes:

• File not uploaded correctly
• URL incorrect or expired
• Format not supported
• File too large

Solutions:

• Re-upload image
• Check URL accessibility
• Convert format
• Compress file

Poor Quality

• Original too small
• Over-compressed
• Wrong format for content
• Check source resolution

Slow Loading

• File too large
• Server issues
• Not optimized
• Many images on page

Display Issues

• Check sizing settings
• Verify alignment
• Test different browsers
• Review responsive behavior

Broken on Mobile

• Test on devices
• Check responsive settings
• Verify URL works on mobile
• Reduce file size

---

Related articles:

• Text Block Element
• Question Types Overview
• Customizing Survey Themes