K-img-helper

Optimize your images just with one command. It's highly configurable!

Install

# if occurs problem with install sharp (linux | macos)
sudo chown -R $USER ~/.npm

npm i -g k-img-helper # globally
npm i -D k-img-helper # locally
yarn add -D k-img-helper # locally

Features

• Convert old formats to webp and deletes if after convertation (optionally)
• Scan site and resize imgs by its client size in certain breakpoints set
• Generate srcset for created resizes
• Detect missing of src, alt attributes

Usage

Create your config called imghelper.config.json in root of your project.

{
    "url": "http://127.0.0.1:3000",
    "publicContentUrl": "http://127.0.0.1:3000/static", 
    "publicDir": "./public",
}

Run optimization via CLI.

k-img-helper optimize # if installed globally
# or
npx k-img-helper optimize # if installed locally

Commands

• analyze
• convert
• optimize
• authors
• help

Config

You can configure it by seperate config file or pass options to cli.

Full config file interface:

export interface IUserConfig {
    // [defaultValue]

    url: string; // url to your site
    publicUrl?: string; // ["/"] url to your statuc files like "https://mysite.com/static/"
    publicDir?: string; // ["./public"] path to folder with static public content
    
    deleteOriginal?: boolean; // [false] delete png, jpg images after convertation to webp

    resize?: boolean; // [true]
    defaultViewport?: IBreakPoint; // sets fallback values for breakpoints
    breakPoints?: IBreakPoint[]; // { heigth: number, width: number } values in px
    resizeThreshold?: number; //[7] procents difference betweem image size to skip resize
    breakpointSwitchDelay?: number; // how many to wait for js event handle after browser resize
    
    imgNameTemplate?: string; // ['$name_w$width_h$height'] template to name resized images
                              // replaces $name, $width, $height with originally name,
                              // client width & height in px

    convert?: boolean; // [true] image convertation to webp | avif
    imgFormat?: ImgFormats; // ['webp'] format to convert images (webp, avif)

    // [true]
    detectNoAltAttr?: boolean;
    detectNoSrcSetAttr?: boolean;
    detectNoSrcAttr?: boolean;
    detectNoSizeAttr?: boolean;
    detectTypeMismatch?: boolean;

    log?: boolean; // [true]
    logSkipped?: boolean; // [true]
    logImgConvert?: boolean; // [true]
    logResizes?: boolean; // [true]
    logResizesDetailsJson?: boolean; // [false]
    logDeleteConverted?: boolean; // [true]
}

CLI cfg

Pass cli params in kebab case

Example: detectNoAltAttr becomes --detect-no-alt-attr.

Pass false to disable attribute, otherwise it will be true

Example: --detect-no-alt-attr false

Sources

• :package: this package on npm
• :octocat: this package on github