npmpackage.info

Gathering detailed insights and metrics for webpack-image-resize-loader

Other packages similar to webpack-image-resize-loader

style-loader

4.0.0

style loader module for webpack

css-loader

7.1.2

css loader module for webpack

postcss-loader

8.1.1

PostCSS loader for webpack

image-webpack-loader

8.1.0

Image loader module for webpack

Gathering detailed insights and metrics for webpack-image-resize-loader

webpack-image-resize-loader

Webpack loader to resize imported images

5.0.0

MIT

TypeScript

297,647 2.8

Installations

npm install webpack-image-resize-loader

Pull Requests

Open

34

Total

768

Closed

609

Merged

125

Issues

Open

3

Total

6

Closed

3

Releases

Release v5.0.0

v5.0.0

Published on 14 Oct 2021

Release v4.1.0

v4.1.0

Published on 05 Jun 2021

Release v4.0.2

v4.0.2

Published on 06 Apr 2021

Release v4.0.0

v4.0.0

Published on 19 Jan 2021

Release v3.1.0

v3.1.0

Published on 13 Dec 2020

Release v3.0.6

v3.0.6

Published on 30 Nov 2020

View all 20 releases

Developer

Calvin-LL

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>= 10.13.0

Typescript Support

No

Node Version

14.18.0

NPM Version

6.14.15 Statistics

39 Stars

274 Commits

5 Forks

2 Watching

36 Branches

1 Contributors

Updated on 18 Jul 2023

Languages

TypeScript (97.51%)

JavaScript (2.49%)

Total Downloads

Cumulative downloads

Total Downloads

297,647

Last day

24.5%

381

Compared to previous day

Last week

19.8%

2,893

Compared to previous week

Last month

18.3%

11,406

Compared to previous month

Last year

32%

104,362

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

webpack-image-resize-loader

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:

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

Install with yarn:

1yarn 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

1module.exports = {
2  // ...
3  module: {
4    rules: [
5      // ...
6      {
7        // convert all imported images to have max width 1000px
8        test: /\.(png|jpe?g|webp|tiff?)$/i,
9        use: [
10          "file-loader",
11          {
12            loader: "webpack-image-resize-loader",
13            options: {
14              width: 1000,
15            },
16          },
17        ],
18      },
19    ],
20  },
21};

You can override options with queries

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

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

1// or any other options
2import 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.

1{
2  png: { compressionLevel: 9, adaptiveFiltering: true },
3  jpeg: { mozjpeg: true },
4  webp: { reductionEffort: 6 },
5  avif: { speed: 0 }
6}

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

as in

1{
2  resize: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-resize#parameters
3  png: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#png
4  jpeg: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#jpeg
5  webp: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#webp
6  avif: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#avif
7  tiff: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#tiff
8}

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

For example:

1// ...
2sharpOptions: {
3  png: { quality: 80 }
4}
5// ...

sharpOptions will become this after being merged with defaults:

1{
2  png: { quality: 80 }
3  jpeg: { mozjpeg: true },
4  webp: { reductionEffort: 6 },
5  avif: { speed: 0 }
6}

`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

1function defaultFileLoaderOptionsGenerator(options, existingOptions) {
2  let name = existingOptions?.name;
3
4  if (name === undefined) {
5    name = `[contenthash].${options.format}`;
6  } else if (typeof name === "string") {
7    name = name.replace("[ext]", options.format);
8  } else if (typeof name === "function") {
9    name = (file: string) => {
10      const nameFn = existingOptions.name;
11
12      return nameFn(file).replace("[ext]", format);
13    };
14  }
15
16  return {
17    ...existingOptions,
18    name,
19  };
20}

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/Calvin-LL/webpack-image-resize-loader/release.yml/main?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

69 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

2.8

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to webpack-image-resize-loader

webpack-image-resize-loader

Installations

Pull Requests

34

768

609

125

Issues

3

6

3

Releases

Developer

Calvin-LL

Developer Guide

CommonJS

>= 10.13.0

No

14.18.0

6.14.15

Statistics

Languages

Total Downloads

297,647

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

webpack-image-resize-loader

Examples

Install

Usage

webpack.config.js

You can override options with queries

Options

width

height

scale

scaleUp

fit

position

background

format

quality

default

sharpOptions

default

fileLoader

fileLoaderOptions

default

10

10

10

4

0

0

0

0

0

0

0

0

0

2.8

/10

Other packages similar to webpack-image-resize-loader

`width`

`height`

`scale`

`scaleUp`

`fit`

`position`

`background`

`format`

`quality`

`sharpOptions`

`fileLoader`

`fileLoaderOptions`