optimizer-server.md

Standalone server

You can also easily spin up a custom image optimization server. Below is an example using Bun:

npm i openimg@latest sharp@latest

import { getImgResponse } from "openimg/bun";

Bun.serve({
  port: 3001,
  async fetch(req) {
    try {
      const headers = new Headers();
      headers.set("Cache-Control", "public, max-age=31536000, immutable");
      return getImgResponse(req, {
        headers,
        allowlistedOrigins: ["http://localhost:3000", "https://example.com"],
      });
    } catch (err: unknown) {
      console.error(err);
      return new Response("Internal Server Error", { status: 500 });
    }
  },
});

console.log(`Server listening on http://localhost:3001`);

This example server runs on port 3001 and supports fetching original images from two remote origins. Given your web server is running on port 3000, you can visit http://localhost:3001?src=http://localhost:3000/cat.png&w=300&h=300&format=avif&fit=cover to fetch an image hosted on your web server's public folder.

You can configure openimg/react to query images from a standalone image optimization server by wrapping your app in OpenImgContextProvider:

import { OpenImgContextProvider, Img } from "openimg/react";

export default function App() {
  return (
    <OpenImgContextProvider optimizerEndpoint="http://localhost:3001">
      <Img
        src="http://localhost:3000/image.jpg"
        width={1200}
        height={800}
        fit="contain"
        alt="Example Image"
      />
    </OpenImgContextProvider>
  );
}