@flexis/srcset v4.2.0

@flexis/srcset

Highly customizable tool for generating responsive images.

• Responsive images 🌠
• Optimize images with imagemin 🗜
• Convert images to modern formats such as WebP and AVIF 📸
• You can run it from the CLI ⌨️
• Works with Gulp, Webpack and as JS library 🦄

Install

npm i -D @flexis/srcset
# or
yarn add -D @flexis/srcset

Usage

CLI

npx srcset [...sources] [...options]
# or
yarn exec -- srcset [...sources] [...options]

Example

srcset "src/images/*.jpg" --match "(min-width: 1920px)" --width 1920,1280,1024,860,540,320 --format jpg,webp -d static/images

Configuration

Common options

Constructor options

Extends common options.

Rule options

Extends common options.

Configuration file

Configuration file is optional. If needed, can be defined through .srcsetrc (JSON file) or .srcsetrc.js in the root directory of the project.

Supported options, extends common options:

Gulp

You can use @flexis/srcset with Gulp:

import srcSet from '@flexis/srcset/lib/stream';

gulp.task('images', () =>
    gulp.src('src/*.{jpg,png}')
        .pipe(srcSet([{
            match: '(min-width: 3000px)',
            width: [1920, 1280, 1024, 860, 540, 320],
            format: ['jpg', 'webp']
        }, {
            match: '(max-width: 3000px)',
            width: [1, .5],
            format: ['jpg', 'webp']
        }], {
            skipOptimization: true
        }))
        .pipe(gulp.dest('static'))
);

Plugin options:

First argument is IRule[], second argument extends common options:

JS API

Module exposes next API:

export default SrcSetGenerator;
export {
    IProcessingConfig,
    IOptimizationConfig,
    ISrcSetVinyl,
    ISize,
    IMatcherFunction,
    SupportedExtension,
    Matcher,
    IPostfixFormatter,
    Postfix,
    IConfig,
    IGenerateConfig,
    isSupportedType,
    extensions,
    attachMetadata,
    matchImage
}

Example

import {
    promises as fs
} from 'fs';
import SrcSetGenerator from '@flexis/srcset';
import Vinyl from 'vinyl';

async function generate() {
    const path = 'src/background.jpg';
    const contents = await fs.readFile(path);
    const source = new Vinyl({
        path,
        contents
    });
    const srcSet = new SrcSetGenerator();
    const images = srcSet.generate(source, {
        width: [1920, 1280, 1024, 860, 540, 320],
        format: ['jpg', 'webp']
    });

    for await (const image of images) {
        image.base = './static';
        await fs.writeFile(image.path, image.contents);
    }
}

generate();

Description of all methods you can find in Documentation.