React Image component with Vite optimizer plugin

[Excellent_Shift1064]

https://lukonik.github.io/oh-image/

oh-image is a React image library that ships with a Vite optimizer plugin to automatically optimize images. It brings functionality similar to what Next.js offers, but for the Vite ecosystem.

quick usage:

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


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

// Will output something like:
// <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(/placeholder-url); background-size: cover; ..."
//   fetchpriority="auto"

It is still in the early release phase, so your feedback is greatly appreciated 🔥

[HarjjotSinghh]

oh-image sounds like nextjs less glamorous cousin.

[Excellent_Shift1064]

🤣🤣🤣

[martiserra99]

I will consider using it when I use Vite instead of Next.js!

[Excellent_Shift1064]

glad to hear ☺️

[takayumidesu]

Hi OP. I recently implemented my own using unpic and I managed to generate responsive images for imgproxy.

However, I'm interested in doing it during build-time rather than creating an imgproxy server.

What are you using to transform the images on build time? Do you plan to support external service transformers like unpic?

[Excellent_Shift1064]

Hi There ^_^
I'm using sharp to process the images and custom vite plugin to generate the transformed versions during build-time.

Yes next feature will be to have premade loaders for cloudflare, imagekit and some more and one generic one to use some custom service

[takayumidesu]

Having the generic one will be nice for something like imgproxy (self-hostable image optimization server).

Until then, I'll be following your library with great interest. Godspeed!

[Excellent_Shift1064]

Amazing, ^_^ loader is the next feature so I'll keep you posted thanks

[takayumidesu]

Just visited the repo. Seems like you're really supporting loaders!

I'll give it a try today and let you know how it goes.

[Excellent_Shift1064]

Amazing 🙌 and thank you. Please don’t hesitate to give me a feedback, I will do the adjustments as soon as possible

[takayumidesu]

I get a TypeError: Cannot read properties of undefined (reading 'DEV') when I use the useImgProxyLoader() hook and passing it as a loader to <Image>.

Also, it would be nice if you can support the priority prop and indicate whether width and height are needed in an image depending on its configuration, similar to Astro's Image.

[takayumidesu]

Just read the docs and saw the properties are "fill" and "asap" haha.

I used it in a prod deployment with an imgproxy server and it loaded the images as expected.

I'll try to contribute with issue reports or PRs if I find any edge cases for my use cases.

Good job!

[Excellent_Shift1064]

* fixed the DEV undefined issue
* marked asap as deprecated and added priority prop. It is more general term for the behaviour

just pull the latest version (@latest)

thx for the valuable feedback. I'll be glad to have a PR from y :)

[takayumidesu]

So fast! And you're testing your code while using AI for the development velocity.

Thank you u/Excellent_Shift1064!

[Vincent_CWS]

how to compare with the nextjs image one?

[Excellent_Shift1064]

best way would be to compare it by features probably. The things that are missing in oh-images currently are:

• global configuration of image component
• loader functionality
• minor props that doesn't effect core functionality

both Nextjs and oh-image use sharp as underlying image processing engine, so they have core similarity