Gulp Image Optimise

Gulp Image Optimize is a set of gulp tasks for optimizing images. It can compress, resize and create sqip placeholders for images.

Requirements

Due to the fact that this setup uses gulp-sqip you must install Golang and then get the Primitive package with go get -u github.com/fogleman/primitive. Make sure you add the path to the Primitive binary file and the path to the bin folder inside your Golang installation directory.

Installation

Open up a terminal inside the folder where you cloned this repository and run

npm install

Usage

You can create a file called images.config.js where gulpfile.js is located and edit the configuration from there. If a config file is not provided the default values will be used.

To run the setup open up a terminal and run either npm run image-optimise or gulp image-optimise.

Here is an example for the images.config.js file

module.exports = [{
    src: './src/images',

    dest: './dist/images',

    resize: {
        // disabled: true,
        sizes: [1080, 720, 480, 360],
        suffix: '-__size__',
        prefix: '',
    },

    placeholder: {
        // disabled: true,
        suffix: '-placeholder',
        prefix: '',
        numberOfPrimitives: 8
    },

    compress: {
        // disabled: true,

        mozjpeg: {
            // disabled: true,
            // quality: 65,
            dcScanOpt: 2
        },

        pngquant: {
            // disabled: true,
            // quality: '65',
            speed: 1,
        },

        svgo: {
            // disabled: true,
            mergePaths: true
        },

        gifsicle: {
            // disabled: true,
            interlaced: true,
            optimizationLevel: 3
        },

        webp: {
            // disabled: true,
            // quality: 75,
            method: 6
        }
    },

    // copy: true
}, {
    src: './src/images/avatars',

    dest: './dist/images/avatars',

    resize: [480, 360, 240],
}];

Options

Config

Property	Type	Default value	Description
src	String	'./src/images'	The source folder for the images.
dest	String	'./dist/images'	The destination folder for the images.
resize	Boolean | Array<Number> | Object	Default resize options	Options for resizing images and renaming them accordingly. When it is set to false image resizing is skipped. When it is set to true or undefined it uses the default value.
placeholder	Boolean | Object	Default placeholder options	Options for creating SQIP placeholders for images and renaming them accordingly. When it is set to false image placeholder creation is skipped. When it is set to true or undefined it uses the default value.
compress	Boolean | Object	Default resize options	Options for compresing images using imagemin. When it is set to false image compression is skipped. When it is set to true or undefined it uses the default value.
copy	Boolean	false	Whether or not to copy the image at its original size. Note that it is still compressed if the option is enabled.
extensions	String	'jpeg,jpg,png,gif,svg,bmp'	The extensions for the images to be optimised.

Resize

Property	Type	Default value	Description
disabled	Boolean	false	Whether or not to skip resizing images.
sizes	Array<Number>	[1080, 720, 480, 360]	An array of widths (in pixels) to which the images should be resized. Note that aspect ratio is maintained.
suffix	String	'-__size__'	The string to append to the end of the name of the resized file.
prefix	String	''	The string to append to the start of the name of the resized file.

The '__size__' string is replaced with the width of the image. For instance, if the image was called image.png, the prefix value was '-__size__px' and the value for the sizes property was [720] the output would have been image-720px.png. The __size__ can be used with either the prefix or suffix property.

Placeholder

Property	Type	Default value	Description
disabled	Boolean	false	Whether or not to skip creating SQIP image placeholders.
suffix	String	'-placeholder'	The string to append to the end of the name of the resized file.
prefix	String	''	The string to append to the start of the name of the resized file.
numberOfPrimitives	Number	8	The number of primitive shapes used to create the svg.

Compress

Property	Type	Default value	Description
disabled	Boolean	false	Whether or not to skip image compression.
mozjpeg	Boolean | Object	{ dcScanOpt: 2 }	See the mozjpeg options. You can additionally disable it by either setting its value to false or by passing disabled: false to the options.
pngquant	Boolean | Object	{ speed: 1 }	See the pngquant options. You can additionally disable it by either setting its value to false or by passing disabled: false to the options.
svgo	Boolean | Object	{ mergePaths: true }	See the svgo options. You can additionally disable it by either setting its value to false or by passing disabled: false to the options.
gifsicle	Boolean | Object	{ interlaced: true, optimizationLevel: 3 }	See the gifsicle options. You can additionally disable it by either setting its value to false or by passing disabled: false to the options.
webp	Boolean | Object	{ method: 6 }	See the webp options. You can additionally disable it by either setting its value to false or by passing disabled: false to the options.

Plugins used

• gulp-sqip
• gulp-imagemin
• gulp-image-resize
• gulp-rename
• gulp-run-sequence

License

MIT © ThisNameWasTaken