uiImage

Responsive image component. Supports aspect-ratio cropping with object-fit: cover, optional caption, and rounded corners. Always uses loading="lazy" and decoding="async".

With aspect ratio

Set ratio to constrain the image to a fixed aspect ratio. The image fills the crop area with object-fit: cover.

The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope

uiImage({ src: '/img/nebula.jpg', alt: 'The Pillars of Creation in the Eagle Nebula', ratio: '16/9' })

Square and rounded

uiImage({ src: '/img/nebula.jpg', alt: 'The Pillars of Creation in the Eagle Nebula', ratio: '1/1', rounded: true })

With caption

uiImage({
  src:     '/img/nebula.jpg',
  alt:     'The Pillars of Creation in the Eagle Nebula',
  ratio:   '4/3',
  caption: 'The Pillars of Creation, Eagle Nebula. Photo: NASA, ESA, Hubble Heritage Team.',
})

Prop	Type	Default	Description
`src`	string	—	Image source URL
`alt`	string	—	Alt text — required for accessibility
`caption`	string	—	Renders a `<figcaption>` below the image
`ratio`	string	—	CSS aspect-ratio string e.g. `'16/9'`, `'4/3'`, `'1/1'`. When set, the image fills the crop area with `object-fit: cover`.
`rounded`	boolean	false	Applies full border-radius to the image wrap
`width`	number	—	Sets the `width` attribute on the `<img>`
`height`	number	—	Sets the `height` attribute on the `<img>`
`class`	string	—