npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-image-resize-loader

v5.0.0

Published

Webpack loader to resize imported images

Downloads

11,653

Readme

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