React Component

The <Image> component renders optimized images processed by the oh-image plugin.

import { Image } from "@lonik/oh-image/react";
import photo from "./assets/photo.jpg?oh";

function App() {
  return <Image src={photo} alt="A photo" />;
}

Props

Prop	Type	Required	Description
`src`	`string \| ImageSrc`	Yes	Image source URL or optimized image object
`alt`	`string`	Yes	Alternative text for accessibility
`placeholderUrl`	`string`	No	Custom placeholder image URL
`asap`	`boolean`	No	Load image immediately with high priority
`fill`	`boolean`	No	Make image fill its container
`width`	`number`	No	Image width in pixels
`height`	`number`	No	Image height in pixels
`sizes`	`string`	No	Responsive sizes attribute
`loading`	`"lazy" \| "eager"`	No	Loading strategy
`decoding`	`"async" \| "sync" \| "auto"`	No	Decoding hint
`fetchPriority`	`"high" \| "low" \| "auto"`	No	Fetch priority hint
`className`	`string`	No	CSS class name applied to the `img` element
`srcSet`	`string`	No	Responsive image source set
`style`	`CSSProperties`	No	Inline styles applied to the `img` element

src

Accepts either a plain URL string or an ImageSrc object from the plugin.

When imported with ?oh, the plugin returns an ImageSrc object with the optimized src, dimensions, srcSet, and placeholder URL — all applied automatically:

import heroImage from "./assets/hero.jpg?oh";

<Image src={heroImage} alt="Hero" />;

When using a plain URL, provide width and height manually to prevent layout shift:

<Image src="/images/photo.jpg" alt="Photo" width={800} height={600} />

placeholderUrl

A URL for a low-resolution blurred image shown while the full image loads. When the plugin processes an image, a placeholder is generated and provided automatically via the ImageSrc object.

You can also pass a custom one:

<Image src={photo} alt="Photo" placeholderUrl="/custom-placeholder.jpg" />

asap

Uses sensible defaults to load the image as soon as possible. Use it for above-the-fold images such as:

Hero banners
Headline images
Header logos
Any image visible without scrolling

<Image src={heroImage} alt="Hero banner" asap />

fill

Stretches the image to 100% width and height of its parent. Sets inset: 0 for absolute positioning and defaults sizes to "100vw".

The parent must have position: relative/absolute/fixed and defined dimensions:

<div style={{ position: "relative", width: "100%", aspectRatio: "16/9" }}>
  <Image src={banner} alt="Banner" fill />
</div>

sizes

Tells the browser how wide the image will be at different viewport sizes, so it can pick the right variant from the srcSet:

<Image
  src={photo}
  alt="Photo"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

Complete example

import { Image } from "@lonik/oh-image/react";
import heroImage from "./assets/hero.jpg?oh";
import galleryImage from "./assets/gallery.jpg?oh";

function Page() {
  return (
    <div>
      {/* Hero: loads immediately, full width */}
      <div style={{ position: "relative", height: 500 }}>
        <Image src={heroImage} alt="Welcome to our site" fill asap />
      </div>

      {/* Gallery: lazy loads, responsive sizing */}
      <div className="grid grid-cols-3 gap-4">
        <Image
          src={galleryImage}
          alt="Gallery photo"
          sizes="(max-width: 768px) 100vw, 33vw"
          className="rounded-lg"
        />
      </div>
    </div>
  );
}