@flexis/srcset-loader v4.2.2

@flexis/srcset-loader

Highly customizable loader for generating responsive images.

• Responsive images 🌠
• Optimize images with imagemin 🗜
• Convert images to modern formats such as WebP and AVIF 📸

Install

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

Usage example

JavaScript:

import {
    groupBy,
    filterBy,
    toString
} from '@flexis/srcset-loader/runtime';
import url, {
    src,
    srcSet,
    srcMap
} from './image.jpg';

CSS:

.image {
    background-image: url('./image.jpg');
}

.webp .image {
    background-image: url('./image.jpg?{ "format": "webp" }');
}

.image.sm {
    background-image: url('./image.jpg?{ "width": 320 }');
}

Description

Src object

Loader exports

Runtime exports

Located in @flexis/srcset-loader/runtime.

Query parameters

With @flexis/srcset-loader you can add query parameters to image imports. Examples:

Generate image with given rule:

import url from './image.jpg?{ "width": [1, 0.5], "format": ["webp", "jpg"] }';

Select default exportable image variant:

import url from './image.jpg?width=320';

Select default exportable image from given rule:

import url from './image.jpg?width=0.5&{ "width": [1, 0.5], "format": ["webp", "jpg"] }';

Use commonjs exports:

const url = require('./image.jpg?commonjs');

Configuration

Example:

module.exports = {
    module:  {
        rules: [{
            test: /\.jpe?g$/,
            use:  {
                loader:  '@flexis/srcset-loader',
                options: {
                    rules: [{
                        match:  '(max-width: 3000px)',
                        width:  [1, 1920, 1280, 720, 560, 320],
                        format: ['webp', 'jpg']
                    }],
                    scalingUp: false
                }
            }
        }]
    }
}

Common options

Exports options

Rule options

Extends common options.

Loader options

Extends common options.

Using with TypeScript

Add it to your globals.d.ts:

declare module '*.jpg' {
    const url: import('@flexis/srcset-loader/types').Url;
    const src: import('@flexis/srcset-loader/types').Src;
    const srcSet: import('@flexis/srcset-loader/types').SrcSet;
    const srcMap: import('@flexis/srcset-loader/types').SrcMap;
    export default url;
    export {
        src,
        srcSet,
        srcMap
    };
}