img4web

    1.0.7 • Public • Published

    img4web

    Image converter for adaptive web pages.

    npm package

    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

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

    Install

    npm i img4web

    DownloadsWeekly Downloads

    2

    Version

    1.0.7

    License

    ISC

    Last publish

    Collaborators

    • shcoder