Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foray1010/image-process-loader
Image process loader for webpack, powered by sharp
https://github.com/foray1010/image-process-loader
gif image image-processing jpeg jpg loader png sharp svg tiff webp webpack webpack-loader
Last synced: 4 months ago
JSON representation
Image process loader for webpack, powered by sharp
- Host: GitHub
- URL: https://github.com/foray1010/image-process-loader
- Owner: foray1010
- License: mit
- Created: 2017-02-17T03:41:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-02T00:24:42.000Z (4 months ago)
- Last Synced: 2024-10-03T09:20:00.456Z (4 months ago)
- Topics: gif, image, image-processing, jpeg, jpg, loader, png, sharp, svg, tiff, webp, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 2.33 MB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# image-process-loader
```sh
npm install --save-dev image-process-loader sharp
# or
yarn add -D image-process-loader sharp
```
Image process loader for webpack, powered by [sharp](https://github.com/lovell/sharp)
- supports operations like resizing, cropping, rotation, color manipulation, file type conversation and [lots more](https://sharp.pixelplumbing.com/)!
- supports JPEG, PNG, WebP, TIFF, GIF and SVG images, but only support output in JPEG, PNG, WebP and TIFF formats
- [sharp](https://github.com/lovell/sharp) is 27x faster than [jimp](https://github.com/oliver-moran/jimp), and 4x faster than [GraphicsMagick](https://github.com/aheckmann/gm) or [ImageMagick](https://github.com/rsms/node-imagemagick) ()
- only support webpack `2.x` and Node.js `>=6.9` (Welcome PR if you need to use older version)
## Development Setup
We are using [corepack](https://nodejs.org/api/corepack.html) to manage the `yarn` version
```bash
corepack enable
```
## Usage
This loader _was not designed to stop you from doing stupid things, because that would also stop you from doing clever things._
You have full access to [sharp API](https://sharp.pixelplumbing.com/), take a look at their documentation starting from [here](https://sharp.pixelplumbing.com/api-output#table-of-contents), and know what methods you can call
---
Take an example from [sharp resize](https://sharp.pixelplumbing.com/api-resize#resize) method. Let's say I want to restrict all image's width to `200px`
In `sharp`
```js
sharp(inputBuffer).resize(200).toBuffer()
```
In `image-process-loader`
```js
/* webpack.config.js */
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|tiff|webp)$/,
loader: 'image-process-loader',
options: {
resize: 200,
},
},
],
},
}
```
It is okay to pass multiple arguments, just wrap your option with array.
For example, if I want to resize all images to `width=200px` and `height=300px`
```js
/* webpack.config.js */
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|tiff|webp)$/,
loader: 'image-process-loader',
options: {
resize: [200, 300],
},
},
],
},
}
```
And of course you can pass `sharp`'s Enums
```js
/* webpack.config.js */
const sharp = require('sharp')
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|tiff|webp)$/,
loader: 'image-process-loader',
options: {
resize: [
200,
300,
{
kernel: sharp.kernel.lanczos2,
interpolator: sharp.interpolator.nohalo,
},
],
},
},
],
},
}
```
One important thing to keep in mind, **the order of options is exactly the same as the order of processing image**
In `image-process-loader`
```js
/* webpack.config.js */
const sharp = require('sharp')
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|tiff|webp)$/,
loader: 'image-process-loader',
options: {
crop: sharp.strategy.entropy,
resize: 200,
},
},
],
},
}
```
In `sharp`
```js
sharp(inputBuffer).crop(sharp.strategy.entropy).resize(200).toBuffer()
```
## Examples
Convert all images to progressive jpeg
```js
/* webpack.config.js */
module.exports = {
module: {
rules: [
{
test: /\.(gif|jpe?g|png|svg|tiff|webp)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].jpg',
},
},
{
loader: 'image-process-loader',
options: {
jpeg: {
progressive: true,
},
},
},
],
},
],
},
}
```
Convert all icons to greyscale when in `development` mode
```js
/* webpack.config.js */
const rules = [
{
test: /\.png$/,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
},
},
]
if (process.env.NODE_ENV === 'development') {
rules.push({
test: /\/icon.+\.png$/, // assume all icons have `icon` prefix
loader: 'image-process-loader',
options: {
greyscale: true,
},
})
}
module.exports = {
module: {
rules: rules,
},
}
```
## Use preset(s) and inline query params
```js
/* webpack.config.js */
module.exports = {
module: {
rules: [
{
test: /\.(gif|jpe?g|png|svg|tiff|webp)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].jpg',
},
},
{
loader: 'image-process-loader',
options: {
jpeg: {
progressive: true,
},
presets: {
blur: {
blur: true,
jpeg: {
quality: 55,
},
},
'good-quality': {
jpeg: {
quality: 80,
},
},
},
},
},
],
},
],
},
}
```
```js
require('path/to/image.jpg?preset=blur') // blur, quality: 55
require('path/to/image.jpg?presets[]=blur&presets[]=good-quality') // blur, quality: 80; presets order matter
require('path/to/image.jpg?presets[]=good-quality&presets[]=blur') // blur, quality: 55; presets order matter
require('path/to/image.jpg?{preset:"blur",{jpeg:{quality:40}}}') // blur, quality: 40
```