Novice Prime Minister

    webpack-image-resize-loader
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    webpack-image-resize-loader

    npm License: MIT

    This loader resize the given images to the desired size.

    Supports JPEG, PNG, WebP, AVIF, and, TIFF images.

    Examples

    React

    Vue

    React example with other related loaders

    Vue example with other related loaders

    Install

    Install with npm:

    npm install --save-dev webpack-image-resize-loader

    Install with yarn:

    yarn add --dev webpack-image-resize-loader

    Usage

    Note: if you only want to shrink some but not all images use webpack's oneOf (like in the examples). If you want to use srcset, check out webpack-image-srcset-loader

    You must place file-loader or url-loader or some other loader capable of handing buffers before webpack-image-resize-loader

    Use webpack-sharp-loader if you want to do other processing to your image before resizing

    webpack.config.js

    module.exports = {
      // ...
      module: {
        rules: [
          // ...
          {
            // convert all imported images to have max width 1000px
            test: /\.(png|jpe?g|webp|tiff?)$/i,
            use: [
              "file-loader",
              {
                loader: "webpack-image-resize-loader",
                options: {
                  width: 1000,
                },
              },
            ],
          },
        ],
      },
    };

    You can override options with queries

    import image from "./some_pic.png?format=webp";

    or

    // or any other options
    import image from "./some_pic.png?width=100&height=100&quality=100&background=green&fit=contain&position=left";

    or

    // or any other options
    import image from './some_pic.png?{"width":500}';

    Options

    Name Type Default Description
    width number undefined The width of the output image.
    height number undefined The height of the output image.
    scale number undefined The fraction of the original size of the output image. width and height take precedence.
    scaleUp boolean false Whether or not to scale up the image when the desired size is larger than the image size.
    fit "cover", "contain", "fill", "inside", or "outside" "cover" How the image should be resized to fit both provided dimensions.
    position See position "centre" Where the image is positioned.
    background string|object {r:0,g:0,b:0,alpha:1} The background color of the image.
    format "jpeg", "png", "webp", "avif", or "tiff" undefined The format of the output file.
    quality number 80 for JPEG, WebP, and TIFF. 100 for PNG. The quality of the output image.
    sharpOptions object see below Additional options for sharp.
    fileLoader string "file-loader" Name or path of a loader that takes in buffers. (why?)
    fileLoaderOptionsGenerator function see below A function that generates options for the specified fileLoader.

    width

    Pixels width the resultant image should be. Use null or undefined to auto-scale the width to match the height.

    This is passed as width to the options of the parameters of sharp's resize function

    height

    Pixels height the resultant image should be. Use null or undefined to auto-scale the height to match the width.

    This is passed as height in the options of the parameters of sharp's resize function

    scale

    A number greater than 0, 1 being the original size, 0.5 being half the size of the original image, 2 being twice the size of the original image.

    If both this and width or height are set, width or height takes precedence.

    scaleUp

    When true, images will be scaled up to a larger size. When false, if the desired size, either the height is greater than the height of the original image, the width is greater than the width of the original image, or scale is greater than 1, the size of the output image will be the same as the imported image.

    fit

    This is passed as fit in the options of the parameters of sharp's resize function

    position

    type: "top", "right top", "right", "right bottom", "bottom", "left bottom", "left", "left top", "north", "northeast", "east", "southeast", "south", "southwest", "west", "northwest", "center", "centre", "entropy", or "attention"

    position, gravity or strategy to use when fit is cover or contain.

    • sharp.position: top, right top, right, right bottom, bottom, left bottom, left, left top.
    • sharp.gravity: north, northeast, east, southeast, south, southwest, west, northwest, center or centre.
    • sharp.strategy: cover only, dynamically crop using either the entropy or attention strategy.

    This is passed as position in the options of the parameters of sharp's resize function

    background

    example: "#7743CE", "rgb(255, 255, 255)", {r:0,g:0,b:0,alpha:1}

    background colour when using a fit of contain, parsed by the color module, defaults to black without transparency.

    This is passed as background in the options of the parameters of sharp's resize function

    format

    When unspecified, outputs the same format as the imported file.

    quality

    default

    Defaults to shape's default is for that given format

    output format default quality
    png 100
    jpeg 80
    webp 80
    avif 50
    tiff 80

    From 1-100, 1 being most compression and worst quality, 100 being least compression and best quality.

    This is passed as quality in the options of the parameters of sharp's png, jpeg, webp, avif, and tiff output functions

    sharpOptions

    default

    The default options aim to provide the smallest images even if it takes more time to generate the image.

    {
      png: { compressionLevel: 9, adaptiveFiltering: true },
      jpeg: { mozjpeg: true },
      webp: { reductionEffort: 6 },
      avif: { speed: 0 }
    }

    sharpOptions can have any of the following keys: resize, png, jpeg, webp, avif, and tiff. These options will override options specified above.

    as in

    {
      resize: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-resize#parameters
      png: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#png
      jpeg: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#jpeg
      webp: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#webp
      avif: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#avif
      tiff: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#tiff
    }

    Setting an item in this object overrides all the defaults for that item.

    For example:

    // ...
    sharpOptions: {
      png: { quality: 80 }
    }
    // ...

    sharpOptions will become this after being merged with defaults:

    {
      png: { quality: 80 }
      jpeg: { mozjpeg: true },
      webp: { reductionEffort: 6 },
      avif: { speed: 0 }
    }

    fileLoader

    Name or path of a loader that takes in buffers.

    This is needed because the output file format is sometimes different from the input file format.

    By default this loader tries to find file-loader and change the "[ext]" in their options.name.

    fileLoaderOptions

    default

    options is the options passed to this loader, existingOptions is the options passed to the loader specified in fileLoader

    function defaultFileLoaderOptionsGenerator(options, existingOptions) {
      let name = existingOptions?.name;
    
      if (name === undefined) {
        name = `[contenthash].${options.format}`;
      } else if (typeof name === "string") {
        name = name.replace("[ext]", options.format);
      } else if (typeof name === "function") {
        name = (file: string) => {
          const nameFn = existingOptions.name;
    
          return nameFn(file).replace("[ext]", format);
        };
      }
    
      return {
        ...existingOptions,
        name,
      };
    }

    This function is used to generate the options for the loader specified by fileLoader

    Install

    npm i webpack-image-resize-loader

    DownloadsWeekly Downloads

    1,004

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • calvin-l