image-web

Image optimisation 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 (4K screen => 4K image)

Usage no npm install needed!

<script type="module">
  import imageWeb from 'https://cdn.skypack.dev/image-web';
</script>

README

Web image

Image optimisation 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 (4K screen => 4K image)

Installation

 $ npm i web-image -g && npm i web-image

Usage

Take files from src/res/img compress them (as avif, webp, jpg & png in 4K, 3K, FHD, HD & PREV) and pipes them to dist/res/img properly named (e.g. image-name@4K.webp).

CLI

 $ image-web src/res/img dist/res/img

The same options as available to the API can be used. For a full list view image-web --help

API

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 qualitative 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 behaviour like this

import imageWeb from "web-image"

imageWeb("src/res/img", "dist/res/img", { silent: false, dynamicResolution: true })

The default export is a basic configured instance. For custom configurations:

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 postfix for resolution (filename e.g. img@littleMoreThanSD.avif)
  { 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 call, when not overwritten.

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.

Common resolutions

Translation table for common resolutions to total pixels (width * height)

const imageResolutions = {
  "4K": 8294400,   // 2160p
  "3K": 3686400,   // 1440p
  "FHD": 2073600,  // 1080p
  "HD": 921600,    // 720p
  "SD": 408960,    // 480p
  "TINY": 36864,   // 144p
  "PREV": 400      // 15p
}

Contribute

All feedback is appreciated. Create a pull request or write an issue.