img4web

Image converter for adaptive web pages.

Installation

First download and install GraphicsMagick or ImageMagick.

Local installation

npm install --save-dev img4web

Global installation

npm install -g img4web

Usage

To run the converter in command line

img4web --help
## Usage: img4web [options]## Options:## -h, --help output usage information# --src-file <file> Specify source file (override --src-dir and --src-ext)# --src-dir <dir> Specify source dir# --src-ext <extensions> Specify source extensions# --out-dir <dir> Specify output dir# --out-format <format> Specify output format#

Run the converter using

img4web --src-dir ./tmp/src --src-ext jpg,png,gif \
--out-dir ./tmp/out --out-format \
'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;\md1=ext:jpg,width:640,height:480:quality:90,strip:true,interlance:Line'

To run the converter using npm, you can specify scripts in package.json

{
"scripts": {
"convert-images": "img4web --src-dir ./tmp/src --src-ext jpg,png,gif --out-dir ./tmp/out --out-format 'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;md1=ext:jpg,width:640,height:480,quality:90,strip:true,interlance:Line'"
}
}

You can specify the config in .img4webrc

{
"srcDir": "./tmp/src",
"srcExt": [
"jpg",
"png",
"gif"
],
"outDir": "./tmp/out",
"outFormat": {
"sm1": {
"ext": "jpg",
"width": 420,
"height": 240,
"quality": 80,
"strip": true,
"interlance": "Line"
},
"md1": {
"ext": "jpg",
"width": 640,
"height": 480,
"quality": 90,
"strip": true,
"interlance": "Line"
}
}
}

Alternatively, you can specify the field img4web in your package.json

{
"img4web": {
"srcDir": "./tmp/src",
"srcExt": [
"jpg",
"png",
"gif"
],
"outDir": "./tmp/out",
"outFormat": {
"sm1": {
"ext": "jpg",
"width": 420,
"height": 240,
"quality": 80,
"strip": true,
"interlance": "Line"
},
"md1": {
"ext": "jpg",
"width": 640,
"height": 480,
"quality": 90,
"strip": true,
"interlance": "Line"
}
}
}
}

And specify scripts in package.json

{
"scripts": {
"convert-images": "img4web"
}
}

Usage result

tag picture

<picture><sourcemedia="(min-width: 768px)" srcset="img-sm1.jpg"><sourcemedia="(min-width: 992px)" srcset="img-md1.jpg"><imgsrc="img.jpg"></picture>

CSS media queries

.container {
background:url(img.jpg);
}
@media (min-width:768px) {
.container {
background:url(img-sm1.jpg);
}
}
@media (min-width:992px) {
.container {
background:url(img-md1.jpg);
}
}

Dependencies

babel-core * babel-runtime * babel-plugin-transform-runtime * babel-plugin-transform-object-rest-spread * babel-preset-es2015 * babel-preset-es2017 * commander * gm * mkdirp * recursive-readdir

Note on Patches/Pull Requests

1. Fork the project.
2. Make your feature addition or bug fix.
3. Send me a pull request.