Image

Component for displaying photos, illustrations, or graphics with configurable sizing and fit behavior.

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. Recommendations: generated – Use generate_image tool for AI-generated images (returns base64 data URL); external – 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). Set a fixed height (e.g. '300px') or use with aspectRatio for constrained sizing. Type: string.

aspectRatio

Constrains image to a specific aspect ratio. Required for 'fit' to have a visible effect when height is 'auto'. Type: string. Options: auto, 1 / 1, 4 / 3, 3 / 2, 16 / 9, 21 / 9. Default: auto. Visual Impact: auto – Image uses its natural aspect ratio (default); 1 / 1 – Square image; 4 / 3 – Traditional photo ratio; 3 / 2 – Standard camera ratio; 16 / 9 – Widescreen ratio (best for hero‑like images); 21 / 9 – Ultra‑wide cinematic ratio. Recommendations: photos – Use '16 / 9' or '3 / 2' for landscape photos; headshots – Use '1 / 1' for profile photos and avatars; product – Use '4 / 3' for product images.

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). Recommendations: photos – Use 'cover' for photos that should fill space; logos – Use 'contain' for logos or images that must show completely; avoid-fill – 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
• Set aspectRatio (e.g. '16 / 9') or explicit height for fit property to work — fit has no effect with height: 'auto' and aspectRatio: 'auto'
• 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)