@webstudio-is/image 0.104.0 → 0.106.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +12 -9
- package/lib/types/image-optimize.d.ts +2 -3
- package/package.json +2 -3
package/lib/index.js
CHANGED
|
@@ -15,7 +15,9 @@ var getWidths = (width, sizes) => {
|
|
|
15
15
|
if (percentSizes.length) {
|
|
16
16
|
const smallestRatio = Math.min(...percentSizes) * 0.01;
|
|
17
17
|
return {
|
|
18
|
-
widths: allSizes.filter(
|
|
18
|
+
widths: allSizes.filter(
|
|
19
|
+
(size) => size >= deviceSizes[0] * smallestRatio
|
|
20
|
+
),
|
|
19
21
|
kind: "w"
|
|
20
22
|
};
|
|
21
23
|
}
|
|
@@ -24,14 +26,15 @@ var getWidths = (width, sizes) => {
|
|
|
24
26
|
if (width == null) {
|
|
25
27
|
return { widths: deviceSizes, kind: "w" };
|
|
26
28
|
}
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
const MAX_DEVICE_PIXEL_RATIO = 2;
|
|
30
|
+
let index = allSizes.findIndex(
|
|
31
|
+
(size) => size >= MAX_DEVICE_PIXEL_RATIO * width
|
|
32
|
+
);
|
|
33
|
+
index = index < 0 ? allSizes.length : index;
|
|
34
|
+
return {
|
|
35
|
+
widths: allSizes.slice(0, index + 1),
|
|
36
|
+
kind: "w"
|
|
37
|
+
};
|
|
35
38
|
};
|
|
36
39
|
var generateImgAttrs = ({
|
|
37
40
|
src,
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
* source size value is 70vw equal to 800px * 0,7 = 560px
|
|
22
22
|
*
|
|
23
23
|
* browser internal srcset will be (we divide `w` descriptor by source size value):
|
|
24
|
-
* photo-small.jpg
|
|
24
|
+
* photo-small.jpg 320w/560px, photo-medium.jpg 640w/560px, photo-huge.jpg 1280w/560px =>
|
|
25
25
|
* photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
|
|
26
26
|
*
|
|
27
27
|
* Finally same rules as for pixel density descriptor 'x' are applied.
|
|
@@ -36,8 +36,7 @@
|
|
|
36
36
|
* > if allSizes.length is too big, you will have many caches misses.
|
|
37
37
|
*
|
|
38
38
|
* If img has a defined width property.
|
|
39
|
-
* 1.
|
|
40
|
-
* 2. use found value to generate srcset with pixel density descriptor 'x'
|
|
39
|
+
* 1. filter allSizes to exclude loading images higher that maxDevicePixelRatio * img.width
|
|
41
40
|
*
|
|
42
41
|
*
|
|
43
42
|
* If img has no defined width property.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/image",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.106.0",
|
|
4
4
|
"description": "Image optimization",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -10,10 +10,9 @@
|
|
|
10
10
|
"warn-once": "^0.1.1"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@jest/globals": "^29.
|
|
13
|
+
"@jest/globals": "^29.7.0",
|
|
14
14
|
"@storybook/react": "^7.4.0",
|
|
15
15
|
"@types/react": "^18.2.21",
|
|
16
|
-
"jest": "^29.6.4",
|
|
17
16
|
"react": "^18.2.0",
|
|
18
17
|
"react-dom": "^18.2.0",
|
|
19
18
|
"typescript": "5.2.2",
|