Skip to content

videinfra/static-website-builder-images-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM version

static-website-builder-images-plugin is a plugin for static-website-builder

Features

  • Converts jpg and png images into webp format
  • Optimize images
  • Resize and crop images

Installing

npm install @videinfra/static-website-builder-images-plugin --save

In the config file (eg. config/config.js) add:

exports.plugins = [
    require('@videinfra/static-website-builder-images-plugin'),
];

Configuration

Optional.
In the config file (eg. config/config.js) add:

exports.imageSizes = {
    // Glob list of files, which to ignore, relative to the image source folder
    // see https://gulpjs.com/docs/en/getting-started/explaining-globs/
    ignore: [
    ],

    // Image file extensions
    extensions: ['jpg', 'png', 'webp', 'gif', 'pdf', 'svg'],

    // Optimization settings + format conversion
    // Default is `false`, images won't be converted into WEBP and won't be optimized
    optimization: {
        // Converting from PNG or JPG into WEBP + optimize
        webp: {
            quality: 89
        },

        // PNG optimization
        png: {
            quality: 89
        },

        // JPG optimization
        jpg: {
            quality: 91
        },
    },

    // Resize settings
    // Default is `false`, images won't be resized
    resize: {
        // glob: { config }
        '/media/test/*.*': {
            // postfix: { size settings }

            // resize to specific size, crop if aspect ratio changes
            '@xs': { width: 100, height: 100 },

            // resize to specific size, when croping uses 'position' as a center point around which
            // to crop the image: [0.5, 0.5] == center (default), [0, 0] == left top corner
            '@md': { width: 100, height: 100, position: [0.5, 0.5] },

            // resize to specific width; aspect ratio is preserved
            '@lg': { width: 300 },

            // resize to specific height; aspect ratio is preserved
            '@xl': { height: 500 },
        },
    },

    // How many of CPU cores to use, default is half of available, but at least 3 if they are available
    cpuCount: null,

    // Production only settings, overwrites default settings
    production: {
    },

    // Development only settings, overwrites default settings
    development: {
    },
}

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published