img-optimizer aims to provide a subset of next/image as an independent library, easy to integrate with your favorite tools.
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:
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");
});
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: