Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maximilianmairinger/imageweb
Image optimisation and compression for the web.
https://github.com/maximilianmairinger/imageweb
compression image img min minification optimisation picture web
Last synced: about 1 month ago
JSON representation
Image optimisation and compression for the web.
- Host: GitHub
- URL: https://github.com/maximilianmairinger/imageweb
- Owner: maximilianMairinger
- Created: 2021-01-01T23:36:50.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T14:15:53.000Z (4 months ago)
- Last Synced: 2024-11-20T07:51:43.515Z (about 1 month ago)
- Topics: compression, image, img, min, minification, optimisation, picture, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/image-web
- Size: 14.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web image
Image optimization and compression for the web. Bulk resize and compress them for dynamic resource deployment. Intended for preload images, thumbnails, client dependent compression algorithms (avif for browsers that support it), end device dependent resolution (
screen => 4K image)
## Installation
```shell
$ npx image-web --help
```
## Usage
Take files from `src/res/img` compress them (as `avif`, `webp` and `jpg` in `UHD`, `FHD`, `PREV`) and pipes them to `dist/res/img` properly named (e.g. `[email protected]`).
### CLI
```shell
$ image-web src/res/img dist/res/img
```
The options are analog the the ones available to the API. Please view `image-web --help` for a comprehensive list. Here an example with options:
```shell
$ image-web src/res/img dist/res/img --algorithm avif,webp --resolution QHD,SD
$ image-web src/res/img dist/res/img -a avif,webp -r 2160p,1080p,15p
```
Another example: Sanitize/recodec a single image (UHD resolution, codec infered by output file type):
```shell
$ image-web src/res/img/image-name.png dist/res/img/image-name.webp
```
### API
```ts
import imageWeb from "web-image"
imageWeb("src/res/img", "dist/res/img")
```
#### Options
By default, the compression algorithms generally produce images at different visual fidelity (avif looks, despite being much better, worse than jpg at the same resolution). Web image tries to mitigate this issue by scaling up the resolution dynamically, depending on the algorithm used. You may disable this behavior like this
```ts
import imageWeb from "web-image"
imageWeb("src/res/img", "dist/res/img", { silent: false, dynamicResolution: false })
```
The default export is a basic configured instance. For custom configurations:
```ts
import { constrImageWeb } from "web-image"
const imageWeb = constrImageWeb(["avif", "webp", "jpg"], [
"FHD", // Common resolution (explained below)
508960, // Total pixels (width * height)
{ pixels: 508960, name: "littleMoreThanSD" }, // name is used as suffix replacing the resolution (filename e.g. [email protected])
{ width: 2000 } // interpolates width or height in 16:9 ratio to pixels
])
imageWeb("src/res/img", "dist/res/img")
```
Options can be given here too. Those will be applied to all instance calls, when not overwritten.
```ts
import { constrImageWeb } from "web-image"
const imageWeb = constrImageWeb(["avif", "jpg"], [
"FHD"
], { silent: false, dynamicResolution: true })
```
##### Supported algorithms
avif, webp, jpg, tiff & png are supported by the underling library [sharp](https://www.npmjs.com/package/sharp).
##### Common resolutions
Translation table for common resolutions to total pixels (width * height)
```ts
export const imageResolutions = {
"2UHD": 7680 * 4320, // 4320p
"UHD": 3840 * 2160, // 2160p
"QHD": 2560 * 1440, // 1440p
"FHD": 1920 * 1080, // 1080p
"HD": 1280 * 720, // 720p
"SD": 640 * 480, // 480p
"LD": 320 * 240, // 240p
"TINY": 256 * 144, // 144p
"PREV": 25 * 15 // 15p
}
```
## Contribute
All feedback is appreciated. Create a pull request or write an issue.