Skip to content

Commit 1780aa9

Browse files
committed
added avif support
1 parent 9bc5bd5 commit 1780aa9

13 files changed

+1626
-1914
lines changed

README.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Per default, responsive-loader uses [jimp](https://github.com/oliver-moran/jimp)
2222
npm install responsive-loader sharp --save-dev
2323
```
2424

25-
For [super-charged performance](http://sharp.dimens.io/en/stable/performance/), responsive-loader also works with [sharp](https://github.com/lovell/sharp). It's recommended to use sharp if you have lots of images to transform, and/or need to generate webp images.
25+
For [super-charged performance](http://sharp.dimens.io/en/stable/performance/), responsive-loader also works with [sharp](https://github.com/lovell/sharp). It's recommended to use sharp if you have lots of images to transform, and/or need to generate webp/avif images.
2626

2727
If you want to use sharp, you need to configure responsive-loader to use its adapter:
2828

@@ -57,14 +57,14 @@ module.exports = {
5757
{
5858
test: /\.(jpe?g|png|webp)$/i,
5959
use: {
60-
loader: 'responsive-loader',
60+
loader: "responsive-loader",
6161
options: {
6262
// If you want to enable sharp support:
63-
adapter: require('responsive-loader/sharp'),
64-
}
65-
}
66-
}
67-
]
63+
adapter: require("responsive-loader/sharp"),
64+
},
65+
},
66+
},
67+
],
6868
},
6969
}
7070
```
@@ -160,7 +160,7 @@ More here https://github.com/webpack/loader-utils#parsequery
160160
| `max` | `integer` | | See `min` above |
161161
| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) |
162162
| `quality` | `integer` | `85` | JPEG and WEBP compression quality |
163-
| `format` | `string` | _original format_ | Either `png` or `jpg`; use to convert to another format. `webp` is also supported, but only by the sharp adapter |
163+
| `format` | `string` | _original format_ | Either `png` or `jpg`; use to convert to another format. `webp` and `avif` is also supported, but only by the sharp adapter |
164164
| `placeholder` | `boolean` | `false` | A true or false value to specify wether to output a placeholder image as a data URI |
165165
| `placeholderSize` | `integer` | `40` | A number value specifying the width of the placeholder image, if enabled with the option above |
166166
| `adapter` | `Adapter` | JIMP | Specify which adapter to use. Can only be specified in the loader options. |
@@ -179,6 +179,7 @@ More here https://github.com/webpack/loader-utils#parsequery
179179
- `background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF` or `%23FFFFFF` for webpack > 5
180180

181181
- `format: webp` — Conversion to the `image/webp` format. Recognizes the `quality` option.
182+
- `format: avif` — Conversion to the `image/avif` format. Recognizes the `quality` option.
182183

183184
- `progressive: boolean` - Use progressive (interlace) scan for `image/jpeg` format.
184185
- `rotate: number` - Rotates image [more here](https://sharp.pixelplumbing.com/api-operation#rotate)

0 commit comments

Comments
 (0)