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>
  <source media="(min-width: 768px)" srcset="img-sm1.jpg">
  <source media="(min-width: 992px)" srcset="img-md1.jpg">
  <img src="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

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

uxter/img4web