You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-8Lines changed: 9 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -22,7 +22,7 @@ Per default, responsive-loader uses [jimp](https://github.com/oliver-moran/jimp)
22
22
npm install responsive-loader sharp --save-dev
23
23
```
24
24
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.
26
26
27
27
If you want to use sharp, you need to configure responsive-loader to use its adapter:
28
28
@@ -57,14 +57,14 @@ module.exports = {
57
57
{
58
58
test:/\.(jpe?g|png|webp)$/i,
59
59
use: {
60
-
loader:'responsive-loader',
60
+
loader:"responsive-loader",
61
61
options: {
62
62
// 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
+
],
68
68
},
69
69
}
70
70
```
@@ -160,7 +160,7 @@ More here https://github.com/webpack/loader-utils#parsequery
160
160
|`max`|`integer`|| See `min` above |
161
161
|`steps`|`integer`|`4`| Configure the number of images generated between `min` and `max` (inclusive) |
162
162
|`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 |
164
164
|`placeholder`|`boolean`|`false`| A true or false value to specify wether to output a placeholder image as a data URI |
165
165
|`placeholderSize`|`integer`|`40`| A number value specifying the width of the placeholder image, if enabled with the option above |
166
166
|`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
179
179
-`background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF` or `%23FFFFFF` for webpack > 5
180
180
181
181
-`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.
182
183
183
184
-`progressive: boolean` - Use progressive (interlace) scan for `image/jpeg` format.
0 commit comments