avif-webpack-loader

Webpack loader for AVIF-encoded images

Installation

yarn add -D avif-webpack-loader

or

npm install --save-dev avif-webpack-loader

Usage

Here is the example of using avif-webpack-loader along with common file-loader:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: ['file-loader', 'avif-webpack-loader']
  }
]

You can pass the options to avif-webpack-loader in a different ways. The preferred one is using options:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: [
      'file-loader',
      { loader: 'avif-webpack-loader', options: { alpha: true } }
    ]
  }
]

Normally you don't want to convert all of your images to AVIF format, you just want to make alternate versions. You can use multi-loader to achieve it:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loader: multi(
      'file-loader?name=[name].[ext].avif!avif-loader?{alpha:true}'
      'file-loader?name=[name].[ext]',
    )
  },
]

Options

Name	Type	Default	Description
alpha	{Boolean}	false	Preserve alpha channel
pixelFormat	{"YUV444"|"YUV422"|"YUV420"|"YUV400"|"NONE"}	"YUV444"	Defines pixel format

Credits

This module uses the saschazar21/webassembly/avif's and saschazar21/webassembly/image-loader's source codes and most of the code is written according to the examples provided in that repository.

Above-mentioned author says that encoding is still very slow since helpers such as multithreading and/or runtime CPU detection have to be disabled in order to successfully compile to WebAssembly. Any help in the base WebAssembly repository is encouraged.

Sources

• AVIF for Next-Generation Image Coding
• Jake Archibald "AVIF has landed"
• libavif - Library for encoding and decoding .avif files

License

Licensed under the MIT license.

Copyright ©️ 2020 Maxim Shmakov