Skip to content

Commit 9e30f4b

Browse files
dazuazdazuaz
committed
changes default adapter to sharp
1 parent 53ae723 commit 9e30f4b

File tree

5 files changed

+143
-126
lines changed

5 files changed

+143
-126
lines changed

‎README.md

Lines changed: 47 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,68 @@
11
# responsive-loader
22

33
[![build][travis]][travis-url]
4-
[![npm][npm]][npm-url]
54
[![node][node]][node-url]
65

76
A webpack loader for responsive images. Creates multiple images from one source image, and returns a `srcset`. For more information on how to use `srcset`, read [Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Browser support is [pretty good](http://caniuse.com/#search=srcset).
87

98
## Install
109

11-
### With jimp
10+
### With sharp
1211

1312
```
14-
npm install responsive-loader jimp --save-dev
13+
npm install responsive-loader sharp --save-dev
1514
```
1615

17-
Per default, responsive-loader uses [jimp](https://github.com/oliver-moran/jimp) to transform images. which needs to be installed alongside responsive-loader. Because jimp is written entirely in JavaScript and doesn't have any native dependencies it will work anywhere. The main drawback is that it's pretty slow.
16+
For [super-charged performance](http://sharp.dimens.io/en/stable/performance/) and webp and avif formats support, responsive-loader works with [sharp](https://github.com/lovell/sharp). It's recommended to use sharp if you have lots of images to transform.
1817

19-
### With sharp
18+
```js
19+
module.exports = {
20+
// ...
21+
module: {
22+
rules: [
23+
{
24+
test: /\.(png|jpe?g)$/,
25+
use: [
26+
{
27+
loader: 'responsive-loader',
28+
options: {
29+
// Set options for all transforms
30+
},
31+
},
32+
],
33+
type: 'javascript/auto',
34+
},
35+
],
36+
},
37+
}
38+
```
39+
40+
### With jimp
2041

2142
```
22-
npm install responsive-loader sharp --save-dev
43+
npm install responsive-loader jimp --save-dev
2344
```
2445

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.
46+
Responsive-loader can be use with [jimp](https://github.com/oliver-moran/jimp) to transform images. which needs to be installed alongside responsive-loader. Because jimp is written entirely in JavaScript and doesn't have any native dependencies it will work anywhere. The main drawback is that it's pretty slow.
2647

27-
If you want to use sharp, you need to configure responsive-loader to use its adapter:
48+
If you want to use jimp, you need to configure responsive-loader to use its adapter:
2849

2950
```diff
3051
module.exports = {
3152
// ...
3253
module: {
3354
rules: [
3455
{
35-
test: /\.(jpe?g|png|webp)$/i,
36-
use: {
37-
loader: 'responsive-loader',
38-
options: {
39-
+ adapter: require('responsive-loader/sharp')
40-
}
41-
}
56+
test: /\.(png|jpe?g)$/,
57+
use: [
58+
{
59+
loader: 'responsive-loader',
60+
options: {
61+
+ adapter: require('responsive-loader/jimp')
62+
},
63+
},
64+
],
65+
type: 'javascript/auto',
4266
}
4367
]
4468
},
@@ -57,10 +81,10 @@ module.exports = {
5781
{
5882
test: /\.(jpe?g|png|webp)$/i,
5983
use: {
60-
loader: "responsive-loader",
84+
loader: 'responsive-loader',
6185
options: {
6286
// If you want to enable sharp support:
63-
adapter: require("responsive-loader/sharp"),
87+
adapter: require('responsive-loader/sharp'),
6488
},
6589
},
6690
},
@@ -108,30 +132,29 @@ Or use it in CSS (only the first resized image will be used, if you use multiple
108132

109133
```css
110134
.myImage {
111-
background: url("myImage.jpg?size=1140");
135+
background: url('myImage.jpg?size=1140');
112136
}
113137

114138
@media (max-width: 480px) {
115139
.myImage {
116-
background: url("myImage.jpg?size=480");
140+
background: url('myImage.jpg?size=480');
117141
}
118142
}
119143
```
120144

121145
```js
122146
// Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
123-
const responsiveImage = require("myImage.jpg?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300")
147+
const responsiveImage = require('myImage.jpg?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300')
124148

125149
// responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
126150
ReactDOM.render(
127151
<div
128152
style={{
129153
height: responsiveImage.height,
130154
width: responsiveImage.width,
131-
backgroundSize: "cover",
155+
backgroundSize: 'cover',
132156
backgroundImage: 'url("' + responsiveImage.placeholder + '")',
133-
}}
134-
>
157+
}}>
135158
<img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
136159
</div>,
137160
el
@@ -233,7 +256,7 @@ module.exports = {
233256
test: /\.(jpe?g|png)$/i,
234257
use: [
235258
{
236-
loader: "responsive-loader",
259+
loader: 'responsive-loader',
237260
options: {
238261
esModule: true,
239262
},
@@ -279,13 +302,7 @@ In your webpack config, require your adapter
279302

280303
- Inspired by [resize-image-loader](https://github.com/Levelmoney/resize-image-loader), but simpler and without dependency on ImageMagick
281304

282-
[npm]: https://img.shields.io/npm/v/responsive-loader.svg
283-
[npm-url]: https://npmjs.com/package/responsive-loader
284305
[node]: https://img.shields.io/node/v/responsive-loader.svg
285306
[node-url]: https://nodejs.org
286-
[deps]: https://david-dm.org/dazuaz/responsive-loader.svg
287-
[deps-url]: https://david-dm.org/dazuaz/responsive-loader
288307
[travis]: https://travis-ci.com/dazuaz/responsive-loader.svg?branch=master
289308
[travis-url]: https://travis-ci.com/dazuaz/responsive-loader
290-
[size]: https://packagephobia.now.sh/badge?p=responsive-loader
291-
[size-url]: https://packagephobia.now.sh/result?p=responsive-loader

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export async function transform({
158158
adapterOptions,
159159
esModule,
160160
}: TransformParams): Promise<string> {
161-
const adapter: Adapter = adapterModule || require('./adapters/jimp')
161+
const adapter: Adapter = adapterModule || require('./adapters/sharp')
162162
const img = adapter(resourcePath)
163163
const results = await transformations({ img, sizes, mime, outputPlaceholder, placeholderSize, adapterOptions })
164164

‎test/jimp/index.js

Lines changed: 93 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,95 @@
1-
test("multiple sizes", () => {
2-
const multi = require("../cat-1000.jpg?sizes[]=500&sizes[]=2000");
3-
expect(multi).toMatchSnapshot();
4-
expect(multi.default.toString()).toBe(multi.default.src);
5-
});
6-
7-
test("parses json notation", () => {
8-
const multi = require("../cat-1000.jpg?{sizes:[50,100,200]}");
9-
expect(multi).toMatchSnapshot();
10-
});
11-
12-
test("single size", () => {
13-
const single = require("../cat-1000.jpg?size=500");
14-
expect(single).toMatchSnapshot();
15-
});
16-
17-
test("with size defined in webpack.config.js", () => {
18-
const multi = require("../cat-1000.jpg");
19-
expect(multi).toMatchSnapshot();
20-
});
21-
22-
test("disable", () => {
23-
const multi = require("../cat-1000.jpg?disable");
24-
expect(multi).toMatchSnapshot();
25-
});
26-
27-
test("output should be relative to context", () => {
28-
const multi = require("../cat-1000.jpg?name=[path][hash]-[width]x[height].[ext]&context=./");
29-
expect(multi).toMatchSnapshot();
30-
});
31-
32-
test("output should be in outputPath dir", () => {
33-
const multi = require("../cat-1000.jpg?outputPath=img/");
34-
expect(multi).toMatchSnapshot();
35-
});
36-
37-
test("public path should replace global publicPath", () => {
38-
const multi = require("../cat-1000.jpg?outputPath=img/&publicPath=public/");
39-
expect(multi).toMatchSnapshot();
40-
});
41-
42-
test("with placeholder image", () => {
43-
const output = require("../cat-1000.jpg?placeholder=true");
44-
expect(output).toMatchSnapshot();
45-
});
46-
47-
test("output first resized image height & width", () => {
48-
const output = require("../cat-1000.jpg?size=500");
49-
expect(output).toMatchSnapshot();
50-
});
51-
52-
test("png", () => {
53-
const output = require("../cat-transparent.png");
54-
expect(output).toMatchSnapshot();
55-
});
56-
57-
test("png to jpeg with background color", () => {
58-
const output = require("../cat-transparent.png?background=0xFF0000FF&format=jpg");
59-
expect(output).toMatchSnapshot();
60-
});
61-
62-
test("png to jpeg with background color", () => {
63-
const output = require("../cat-transparent.png?background=0xFF0000FF&format=jpg");
64-
expect(output).toMatchSnapshot();
65-
});
66-
67-
test("with min and max sizes", () => {
68-
const output = require("../cat-1000.jpg?min=600&max=800&steps=3");
69-
expect(output).toMatchSnapshot();
70-
});
71-
72-
test("with min and max sizes, and default steps", () => {
73-
const output = require("../cat-1000.jpg?min=500&max=1000");
74-
expect(output).toMatchSnapshot();
75-
});
76-
77-
test("with min and max sizes options", () => {
78-
const output = require("../cat-1000.jpg?minmax");
79-
expect(output).toMatchSnapshot();
80-
});
81-
82-
test("override min and max with sizes", () => {
83-
const output = require("../cat-1000.jpg?minmax&sizes[]=100&sizes[]=200");
84-
expect(output).toMatchSnapshot();
85-
});
86-
87-
test("override min and max with size", () => {
88-
const output = require("../cat-1000.jpg?minmax&size=100");
89-
expect(output).toMatchSnapshot();
90-
});
1+
test('multiple sizes', () => {
2+
const multi = require('../cat-1000.jpg?sizes[]=500&sizes[]=2000')
3+
expect(multi).toMatchSnapshot()
4+
expect(multi.default.toString()).toBe(multi.default.src)
5+
})
6+
7+
test('parses json notation', () => {
8+
const multi = require('../cat-1000.jpg?{sizes:[50,100,200]}')
9+
expect(multi).toMatchSnapshot()
10+
})
11+
12+
test('single size', () => {
13+
const single = require('../cat-1000.jpg?size=500')
14+
expect(single).toMatchSnapshot()
15+
})
16+
17+
test('with size defined in webpack.config.js', () => {
18+
const multi = require('../cat-1000.jpg')
19+
expect(multi).toMatchSnapshot()
20+
})
21+
22+
test('disable', () => {
23+
const multi = require('../cat-1000.jpg?disable')
24+
expect(multi).toMatchSnapshot()
25+
})
26+
27+
test('output should be relative to context', () => {
28+
const multi = require('../cat-1000.jpg?name=[path][hash]-[width]x[height].[ext]&context=./')
29+
expect(multi).toMatchSnapshot()
30+
})
31+
32+
test('output should be in outputPath dir', () => {
33+
const multi = require('../cat-1000.jpg?outputPath=img/')
34+
expect(multi).toMatchSnapshot()
35+
})
36+
37+
test('public path should replace global publicPath', () => {
38+
const multi = require('../cat-1000.jpg?outputPath=img/&publicPath=public/')
39+
expect(multi).toMatchSnapshot()
40+
})
41+
42+
test('with placeholder image', () => {
43+
const output = require('../cat-1000.jpg?placeholder=true')
44+
expect(output).toMatchSnapshot()
45+
})
46+
47+
test('output first resized image height & width', () => {
48+
const output = require('../cat-1000.jpg?size=500')
49+
expect(output).toMatchSnapshot()
50+
})
51+
52+
test('png', () => {
53+
const output = require('../cat-transparent.png')
54+
expect(output).toMatchSnapshot()
55+
})
56+
57+
test('png to jpeg with background color', () => {
58+
const output = require('../cat-transparent.png?background=0xFF0000FF&format=jpg')
59+
expect(output).toMatchSnapshot()
60+
})
61+
62+
test('png to jpeg with background color', () => {
63+
const output = require('../cat-transparent.png?background=0xFF0000FF&format=jpg')
64+
expect(output).toMatchSnapshot()
65+
})
66+
67+
test('with min and max sizes', () => {
68+
const output = require('../cat-1000.jpg?min=600&max=800&steps=3')
69+
expect(output).toMatchSnapshot()
70+
})
71+
72+
test('with min and max sizes, and default steps', () => {
73+
const output = require('../cat-1000.jpg?min=500&max=1000')
74+
expect(output).toMatchSnapshot()
75+
})
76+
77+
test('with min and max sizes options', () => {
78+
const output = require('../cat-1000.jpg?minmax')
79+
expect(output).toMatchSnapshot()
80+
})
81+
82+
test('override min and max with sizes', () => {
83+
const output = require('../cat-1000.jpg?minmax&sizes[]=100&sizes[]=200')
84+
expect(output).toMatchSnapshot()
85+
})
86+
87+
test('override min and max with size', () => {
88+
const output = require('../cat-1000.jpg?minmax&size=100')
89+
expect(output).toMatchSnapshot()
90+
})
9191

9292
test("doesn't emit file", () => {
93-
const multi = require("../cat-1000.jpg?emitFile=false&sizes[]=250");
94-
expect(multi).toMatchSnapshot();
95-
});
93+
const multi = require('../cat-1000.jpg?emitFile=false&sizes[]=250')
94+
expect(multi).toMatchSnapshot()
95+
})

‎test/jimp/webpack.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ module.exports = {
1414
min: 100,
1515
max: 300,
1616
esModule: true,
17+
adapter: require('../../jimp'),
1718
},
1819
type: 'javascript/auto',
1920
},
@@ -23,6 +24,7 @@ module.exports = {
2324
options: {
2425
sizes: [500, 750, 1000],
2526
esModule: true,
27+
adapter: require('../../jimp'),
2628
},
2729
type: 'javascript/auto',
2830
},

‎test/sharp/webpack.config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ module.exports = {
1515
options: {
1616
min: 100,
1717
max: 300,
18-
adapter: require('../../sharp'),
1918
},
2019
},
2120
],
@@ -28,7 +27,6 @@ module.exports = {
2827
loader: require.resolve('../../lib/index'),
2928
options: {
3029
sizes: [500, 750, 1000],
31-
adapter: require('../../sharp'),
3230
},
3331
},
3432
],

0 commit comments

Comments
 (0)