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.

uiImage({ src: '/img/photo.jpg', alt: 'Mountain landscape at dusk', ratio: '16/9' })

Square and rounded

uiImage({ src: '/img/avatar.jpg', alt: 'Profile photo', ratio: '1/1', rounded: true })

With caption

Aerial view of a coastal town — Aerial view of Porto, Portugal. Photo by João Silva.

uiImage({
  src:     '/img/photo.jpg',
  alt:     'Aerial view of a coastal town',
  ratio:   '4/3',
  caption: 'Aerial view of Porto, Portugal. Photo by João Silva.',
})

Prop	Type	Default
`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	—