Resize and optimize images with NodeJS
There are many packages and tools which do that.
Most of them are doing a lot of other things.
This package is focused on two tasks and does them pretty well:
- Resizes your images and
- Optimizes their size
npm i @three11/optisizeor
yarn add @three11/optisizeThis tool accepts the following arguments:
src: String - Source folder or file (Required)width: Number - Target width (Optional)height: Number - Target height (Optional)
- The
srcargument should represent a relative path to your images folder or to your single image. The path is relative to your project's root folder. If thesrcis a folder, all images located inside other folders in that folder will be recursively optisized as well.
import optisize from '@three11/optisize';
const optisizeSettings = {
src: 'path/to/images',
width: 640,
height: 360
};
optisize(optisizeSettings);Add the following in the scripts section of your package.json file:
{
"optisize": "optisize"
}Then invoke the script and supply the required arguments:
yarn optisize --src="path/to/images" --width=640 --height=360or
npm run optisize --src="path/to/images" --width=640 --height=360width and height settings are not required and can be supplied together, alone and also can be missing.
If they are missing, the images will only be optimized.
Optisize supports smart configuration settings via Cosmiconfig:
- a
package.json"optisize" property - a JSON or YAML, extensionless "rc file" -
.optisizerc - an "rc file" with the extensions
.json,.yaml,.yml,.js, or.cjs-.optisize.json,.optisize.yaml,.optisize.yml,.optisize.js, or.optisize.cjs - a
.config.jsor.config.cjsCommonJS module -optisize.config.jsoroptisize.config.cjs
{
// See https://github.com/imagemin/imagemin-gifsicle for more info
"gif": {
"interlaced": true
},
// See https://github.com/imagemin/imagemin-mozjpeg for more info
"jpeg": {
"quality": 70
},
// See https://github.com/imagemin/imagemin-pngquant for more info
"png": {
"quality": [0.5, 0.7]
},
// See https://github.com/imagemin/imagemin-svgo for more info
"svg": {},
// See https://github.com/imagemin/imagemin-webp for more info
"webp": {
"quality": 50
}
}MIT
