Image

The Image component displays photos, illustrations, or graphics and supports various sizing and fit modes.

Use Cases

• Product photos
• Team member headshots
• Logos and branding
• Illustrations and graphics
• Photo galleries

Properties

src

Image URL - can be external URL or data URL from generate_image tool. Type: string.

Tip: Use generate_image tool for AI‑generated images (returns base64 data URL). Use HTTPS URLs for external images.

alt

Alternative text for accessibility - describes image content. Type: string.

width

Image width (CSS value). Type: string.

height

Image height (CSS value). Type: string.

fit

How image should fit within dimensions. Type: string. Options: cover, contain, fill. Default: cover.

Visual Impact: cover – Image covers entire area, may crop edges to maintain aspect ratio (best for photos). contain – Image fits completely within area, may have empty space (best for logos). fill – Image stretched to fill area, may distort (rarely used).

Tip: Use ‘cover’ for photos that should fill space. Use ‘contain’ for logos or images that must show completely. Avoid ‘fill’ – causes distortion.

Best Practices

• CRITICAL: For Hero backgrounds, use generate_image tool and place image in Hero component
• Always set alt text for accessibility
• Use fit: ‘cover’ for photos that should fill space without distortion
• Use fit: ‘contain’ for logos or images that must show completely
• Prefer Hero component with generate_image for hero sections over standalone Image

Common Mistakes

Not setting alt text

Why it's a problem: Violates accessibility standards - screen readers can’t describe image to visually impaired users

Fix: Always set alt with descriptive text explaining image content

Using Image for hero sections instead of Hero component

Why it's a problem: Hero component provides better layout with text overlay, CTA buttons, and responsive design

Fix: Use Hero component with generate_image for hero sections, not standalone Image

Using fit: ‘fill’ which distorts images

Why it's a problem: Stretches image to fit dimensions - causes distortion and looks unprofessional

Fix: Use fit: ‘cover’ for photos (crops edges) or ‘contain’ for logos (shows completely)