mini-image-loader

Small image processing loader for Webpack.

Usage

const imagePath = require("./duck.png?resize=900x&format=jpeg&quality=80");

Webpack config:

{
  module: {
    rules: [{
      test: /\.(png|jpe?g|tiff|webp)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[name].[hash:8].[ext]",
            outputPath: "img/"
          }
        },
        { loader: "mini-image-loader" },
      ]
    }]
  }
}

Debugging

DEBUG=mini-image-loader enables verbose mode.

API

format

Force output to a given format.

Adjust the lossless compression quality with the quality property.

Param: enum, one of png, jpeg, tiff, webp.

require("./duck.jpg?format=png");
require("./frog.png?format=webp");

quality

Set quality for lossless compression (jpeg and webp).

Param: integer, between 1 and 100.

require("./frog.png?format=jpeg&quality=90");

lossless

Set lossless compression for webp.

require("./frog.png?format=webp&lossless");

nearLossless

Set near lossless compression for webp.

require("./frog.png?format=webp&nearLossless");

resize

Resize image to width x height.

Param: string, following the WIDTHxHEIGHT pattern.

Examples:

require("./duck.png?resize=120x240");
require("./cats.jpg?resize=900x");
require("./frog.png?resize=x300");

crop

Crop the resized image to the exact size specified by resize.

The experimental strategy-based approach resizes so one dimension is at its target length then repeatedly ranks edge regions, discarding the edge with the lowest score based on the selected strategy.

• entropy: focus on the region with the highest Shannon entropy.
• attention: focus on the region with the highest luminance frequency, colour saturation and presence of skin tones.

Param: string, north, northeast, east, southeast, south, southwest, west, northwest, center, centre, entropy or attention.

Examples:

require("./duck.png?resize=120x240&crop");
require("./cats.jpg?resize=900x100&crop=entropy");
require("./frog.png?resize=300x300&crop=south");

gravity

Possible attributes of the optional sharp.gravity are north, northeast, east, southeast, south, southwest, west, northwest, center and centre.

tint

Tint the image using the provided chroma while preserving the image luminance. An alpha channel may be present and will be unchanged by the operation.

Param: string, following the rgb hex format #RRGGBB.

Examples:

require("./duck.png?tint=#BABACA");

greyscale

Convert to 8-bit greyscale; 256 shades of grey. This is a linear operation. If the input image is in a non-linear colour space such as sRGB, use gamma with greyscale for the best results. By default the output image will be web-friendly sRGB and contain three (identical) color channels.

Examples:

require("./duck.png?greyscale");

grayscale

Alternative spelling of greyscale.

blur

Blur the image. When used without parameters, performs a fast, mild blur of the output image. When a sigma is provided, performs a slower, more accurate Gaussian blur.

Param: number? a value between 0.3 and 1000 representing the sigma of the Gaussian mask, where sigma = 1 + radius / 2.

Examples:

require("./duck.png?blur");
require("./cats.jpg?blur=1.2");
require("./frog.png?blur=200");

gamma

Apply a gamma correction by reducing the encoding (darken) pre-resize at a factor of 1/gamma then increasing the encoding (brighten) post-resize at a factor of gamma. This can improve the perceived brightness of a resized image in non-linear colour spaces. JPEG and WebP input images will not take advantage of the shrink-on-load performance optimisation when applying a gamma correction.

Param: number?, between 1.0 and 3.0 (optional, default 2.2)

Examples:

require("./duck.png?gamma");
require("./cats.jpg?gamma=1.2");
require("./frog.png?gamma=2.4");

flip

Flip the image about the vertical Y axis. The use of flip implies the removal of the EXIF Orientation tag, if any.

Examples:

require("./duck.png?flip");

flop

Flop the image about the horizontal X axis. The use of flop implies the removal of the EXIF Orientation tag, if any.

Examples:

require("./duck.png?flop");