Node module for optimizing images in web applications.
const { ImagesRequestHandler } = require('lup-images');
const express = require('express');
const app = express();
app.use('/images/*', ImagesRequestHandler());
app.listen();
<OptimizedImage src="https://picsum.photos/200/300" width={200} height={300} />
To work with NextJS you need to add the following to your next.config.js
:
experimental: {
serverComponentsExternalPackages: ["sharp"],
}
Images can also be prerendered before deployment e.g. inside of a CI/CD pipeline. Create a file that contains the following code:
import { PrerenderImages } from 'lup-images';
// this wrapper is needed if you are in the main file of a node project
(async () => {
// prerender images (provide same options as in the request handler)
await PrerenderImages({ ... });
})();
In the CI/CD pipeline or wherever you want to prerender the images, run the file using node.