https://github.com/nitedani/img-optimizer

img-optimizer aims to provide a subset of next/image as an independent library, easy to integrate with your favorite tools.
https://github.com/nitedani/img-optimizer

image-optimization

Last synced: 3 months ago
JSON representation

img-optimizer aims to provide a subset of next/image as an independent library, easy to integrate with your favorite tools.

• Host: GitHub
• URL: https://github.com/nitedani/img-optimizer
• Owner: nitedani
• Created: 2022-11-28T01:38:42.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-05T00:04:38.000Z (about 1 year ago)
• Last Synced: 2024-10-02T08:55:53.404Z (4 months ago)
• Topics: image-optimization
• Language: TypeScript
• Homepage:
• Size: 1.09 MB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# img-optimizer

img-optimizer aims to provide a subset of [next/image](https://nextjs.org/docs/api-reference/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](https://caniuse.com/avif) format when the browser supports it, falling back to [webp](https://caniuse.com/webp).



Integration examples:

- [Express](./examples/express/)

- [Rakkas](./examples/rakkas/)

- [vite-plugin-ssr](./examples/vite-plugin-ssr/)

Integration guide:

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

```ts

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");

});

```

2. Use it on the client/server render:

Simple JS:

```JS

import { createSrcSet } from "img-optimizer";

`





`

```

With React:

```ts

import image from "./test-8k.jpg";

import { Image } from "img-optimizer-react";

export function Page() {

  return (

    <>

        

        

    >

  );

}

```

### Usage with build tools (webpack, vite):

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.

- [Vite example](https://github.com/nitedani/vite-plugin-standalone/tree/main/examples/sharp)

- [Webpack](https://github.com/vercel/webpack-asset-relocator-loader)

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.