img-optimizer aims to provide a subset of next/image as an independent library, easy to integrate with your favorite tools. 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:
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",
}}
/>
</>
);
}
This library requires the Sharp native dependecies to be present at runtime. There are utilities for both webpack and vite that handle this for you.
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.