Introduction

This webpack loader that uses Sharp to encode images into web-friendly formats like WebP and AVIF without any external dependencies.

See Also, If you want the change-log by version for this package. refer to Change Log for details.

Commonly supported formats: webp, avif, tiff, heif, jpeg, png, gif

Install by NPM

To install this package in your project, enter the following command.

When you want to update this package, enter npm update image-encode-loader --save in the terminal to run it.

npm install image-encode-loader --save-dev

How to apply this loader?

This example is based on Webpack 5. Additionally, this loader provides separate image output functionality.

module.exports = {
    module: {
        rules: [
            // To export the image assets files from `src/` to `dist/`.
            // And by default, extensions are typical extensions supported by Chrome.
            {
                test: /\.(png|jpe?g|webp|avif|hei[cf]|gif|tiff)$/i,
                use: [{
                    loader: "image-encode-loader",
                    options: {
                        // This format has the best compression rate at the moment.
                        format: "avif"
                        generator: {
                            filename: "images/[name].[ext]"
                        }
                    }
                }],
            }
        ]
    },
}