img-optimizer-react

img-optimizer

img-optimizer aims to provide a subset of next/image as a framework-independent library, making it possible to integrate with your favorite tools and frameworks. img-optimizer delivers compressed images to the browser on demand. It prioritizes the avif format when the browser supports it, falling back to webp.

Integration examples:

• Express
• Rakkas
• vite-plugin-ssr

Integration guide:

• Add a server-side request handler for "/img-optimizer":

import express from "express";
import { createOptimizer } from "img-optimizer/server";

const app = express();
app.use(express.static("public"));
const optimize = createOptimizer({
    domains: ["some.domain.com"]
});

app.get("/img-optimizer", async (req, res, next) => {
  const result = await optimize({
    url: req.url,
    headers: req.headers,
  });
  const { body, status, headers } = result;
  res.status(status).header(headers).send(body);
});

app.listen(3000, () => {
  console.log("Listening on http://localhost:3000");
});

• Use it on the client/server render:

Simple JS:

import { createSrcSet } from "img-optimizer";
`
<img srcset="${createSrcSet("/test-8k.jpg")}" />
<img srcset="${createSrcSet("https://some.domain.com/some-image.jpg")}" />
`

With React:

import image from "./test-8k.jpg";
import { Image } from "img-optimizer-react";

export function Page() {
  return (
    <>
        <Image
          src={image}
          fill
          alt=""
          style={{
            objectFit: "contain",
            background: "#cef",
          }}
        />
        <Image
          src="https://some.domain.com/some-image.jpg"
          fill
          alt=""
          style={{
            objectFit: "contain",
            background: "#cef",
          }}
        />
    </>
  );
}

createOptimizer options:

• cacheSizeMb?: number
  img-optimizer caches the compressed images. This option sets the upper limit of the cache size in megabytes.
• sizes?: number[]
  img-optimizer can be restricted to only serve specific sizes(width). If the size is not allowed, a 400 bad response will be returned. default: [360, 640, 1024, 1280, 1600, 1920, 2560, 3840]
• formats?: Format[]
  default: [ { format: 'avif', quality: 45 }, { format: 'webp', quality: 65 } ]
• domains?: string[] | true
  the domains configuration can be used to provide a list of allowed hostnames for external images. Setting it to true removes the restriction.