All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.
Properties
Property
Type
Description
Examples
src*required
string
Image URL or path when not using media library id (matches <img src>)
https://images.unsplash.com/photo-...
videoId
string
Media library asset id; when set, image src/metadata resolve from ROOT pageMedia
-
type
string
cdn | url | svg | upload
Image source type. Use 'url' for direct image URLs (e.g. Unsplash), 'cdn' for media library references, 'svg' for inline SVG, 'upload' for uploaded files
Default: "cdn"
-
url
object
Optional click-through URL — wraps the rendered <img> in an <a href>. Prefer `props.action` (NodeAction array) for new code.
-
alt
string
Alt text for accessibility
Product screenshot
title
string
Image title attribute
-
fetchPriority
string
high | low | auto |
Fetch priority for loading (matches ImageProps)
Default: "low"
-
loading
string
lazy | eager
Loading strategy. Leave unset — the viewer auto-stamps the header logo + first hero as eager and everything else lazy. Only set explicitly to override that heuristic.
-
sizes
string
Optional override for the responsive `sizes` attribute (CDN images only). Leave unset — `sizes` is auto-derived from className (full-bleed→100vw, grid columns, height-capped logos, max-w caps). Only set for layouts the deriver can't see, e.g. "(min-width: 768px) 400px, 100vw".
Optional NodeAction(s) that fire on image click — array of action entries (or a single object). Supports link, show-hide, open-modal, etc. Each entry may carry `conversion: { provider, eventName, sendTo?, value?, currency? }` to fire a Google Ads / GA4 / Meta event.