Introduction

Oh Image is a feature-rich React image component paired with a Vite optimizer plugin that handles image optimization for you automatically.

Loading images on the web used to be simple — just set the src attribute and move on. Today, best practices demand much more: meaningful alt text, multiple image variants for different viewport sizes, responsive sizing, performance-tuned attributes for faster loads, placeholder previews while the full image loads, and the list goes on. Keeping up with all of this and configuring it correctly is a real burden — and manually generating multiple versions of every image only makes it worse.

oh-image takes care of all of this for you. It provides two core pieces:

1. A React component that ships with built-in support for responsive images, lazy loading, placeholders, and more — often configurable with a single prop.
2. A Vite optimizer plugin that automatically resizes your images, generates placeholders, and produces responsive variants at build time.

Each piece works on its own, but the real power comes from using them together. Here’s what that looks like:

import carImage from "./assets/car.png?oh"
import { Image } from "@lonik/oh-image/react"

function App() {
    return <Image src={carImage} alt="a red car on an open road" />
}

// Will output:
// <img
//   src="car.png"
//   srcset="car-640w.png 640w, car-960w.png 960w, ..."
//   width="1920"
//   height="1080"
//   alt="a red car on an open road"
//   style="background-image: url(data:image/...); background-size: cover; ..."
//   fetchpriority="auto"
// />

This outputs a fully optimized img element — complete with a placeholder, automatically generated srcset attributes, and proper loading behavior out of the box.

If you’ve used the Next.js Image component before, oh-image offers a similar experience without tying you to the Next.js framework.

Because oh-image is built on top of Vite, it works with any app that uses Vite as its underlying engine — including TanStack Start, Remix, and any other Vite-powered framework.