Image | Radiant Docs

Use Image when you need more control than basic Markdown image syntax. It supports visible captions, dark mode image variants, click-to-zoom, width constraints, and alignment.

Overhead shot of moody plants — Photo by Nico Knaack on Unsplash

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants">  Photo by [Nico Knaack](https://unsplash.com/@xoxnk) on[Unsplash](https://unsplash.com/photos/background-pattern-JF70XoUqlpQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)</Image>

Basic usage

Provide `src` and `alt`

src is required. Always include meaningful alt text for accessibility.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants"/>

Add a caption

Add caption content as the children of the Image component. Caption content supports Markdown.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants">  Photo by [Nico Knaack](https://unsplash.com/@xoxnk).</Image>

Use title only when you want a browser tooltip/title attribute on the image. It does not render a visible caption.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants"  title="Overhead shot of moody plants"/>

Dark mode images

Use the object form of src when the image itself should change between light and dark mode. The light source is required, and dark is optional.

Decorative image that changes between light and dark mode — This image uses a different source in dark mode.
Light mode photo by Marek Piwnicki on Unsplash.
Dark mode photo by Nasa on Unsplash.

<Image  src={{    light: "/images/mountain-layers.jpg",    dark: "/images/nasa.jpg",  }}  alt="Decorative image that changes between light and dark mode">  This image uses a different source in dark mode.   Light mode photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki) on [Unsplash](https://unsplash.com/photos/layered-blue-mountain-ranges-fade-into-the-sky--_OuVFhN5BU).   Dark mode photo by [Nasa](https://unsplash.com/@nasa) on [Unsplash](https://unsplash.com/photos/earth-rising-over-the-moons-horizon-Y38PSLjc-Fg).</Image>

Control size and behavior

Constrain width

Pass width in pixels to keep large images from taking too much space.

Surreal architecture framed through a circular opening — A constrained image can sit comfortably inside a wider page.
Photo by Mehrab Sium on Unsplash

<Image  src="/images/surreal_architecture.jpg"  alt="Surreal architecture framed through a circular opening"  width={350}>  A constrained image can sit comfortably inside a wider page.   Photo by [Mehrab Sium](https://unsplash.com/@mehrab_sium) on [Unsplash](https://unsplash.com/photos/arid-landscape-viewed-through-a-circular-window-in-a-cave-WFXNp8G8-7Q)</Image>

Align a constrained image

Use align to position an image that is narrower than the content column. Supported values are left, center, and right. Images are centered by default.

<Image  src="/images/surreal_architecture.jpg"  alt="Surreal architecture framed through a circular opening"  width={350}  align="left"/>

Disable click-to-zoom

Set zoom={false} when you want the image to remain static.

<Image  src="/images/plants.jpg"  alt="Overhead shot of moody plants"  zoom={false}>  This image does not open the zoom overlay.</Image>

Props

Prop	Description	Type	Default
`src`	Image source path or URL. Use object form for light and dark mode variants.	`string` or `{ light?: string; dark?: string }`
`alt`	Alternative text for accessibility.	`string`
`title`	Browser tooltip/title attribute. This is not a visible caption.	`string`
`width`	Max rendered width in pixels.	`number` or `string`
`align`	Alignment for constrained-width images.	`"left"`, `"center"`, or `"right"`	`"center"`
`zoom`	Enables click-to-zoom overlay behavior.	`boolean`	`true`
children	Optional visible caption content. Supports Markdown.	`Markdown`

Supported Props Only

Image only supports src, alt, title, width, align, and zoom. Use children for the optional caption. Unsupported props will throw a user-facing validation error.