feature request: pixel density
jasongitmail opened this issue · comments
Super useful lib. Nice work.
My goal is to create a picture element with pixel density specified in srcset. Roughly like this simple example:
// Not bulletproofed. Just POC to demonstrate goal.
<picture>
<source
type="image/avif"
srcset="
/image_1x.webp 1x,
/image_2x.webp 2x,
/image_3x.webp 3x
"
/>
<source
type="image/webp"
srcset="
/image_1x.jpg 1x,
/image_2x.jpg 2x,
/image_3x.jpg 3x
"
/>
<img src="/fallback.jpg" alt="Fallback Image" />
</picture>
Problems:
-
Providing the
?density=100;200
increases the # of returned image paths, as expected. For example,import control from '$lib/assets/images/ocean.jpg?w=400;1000&format=webp&density=100;200';
returns:{ { "sources": { "avif": [ { "src": "/@imagetools/60da27e81d9c7b670d3a08f9bbdff95bfbedffb5", "w": 400 }, { "src": "/@imagetools/128eced088ace9a80f6c72c22a913f3c34e7e0fe", "w": 400 } ], "webp": [ { "src": "/@imagetools/da270fea26b6c3a4f3f54d03a64171cac31e45d6", "w": 400 }, { "src": "/@imagetools/511a4bc9ff91464b2ef3037b9a14b53e21adfecf", "w": 400 } ] }, "img": { "src": "/@imagetools/da270fea26b6c3a4f3f54d03a64171cac31e45d6", "w": 400, "h": 267 } }
But upon opening the image files directly, to compare the two AVIFs for example,
/@imagetools/60da27e81d9c7b670d3a08f9bbdff95bfbedffb5
vs/@imagetools/128eced088ace9a80f6c72c22a913f3c34e7e0fe
, both have the same actual pixel dimensions. I was expecting one to be 800px. -
It'd be helpful if the response image objects contained a
density
property for clarity and easier handling, when the density query parameter property is provided.
+1 I have the same problem
Can you check if this happens with 5.0.5?
@benmccann Same issue in 5.0.5.
// ?w=400&format=webp&as=picture&density=100;200
{
"sources": {
"webp": [
{
"src": "/@imagetools/5ccabd5fe6fbf6f21048ddbb136dde28284f273a", // pixel width is 400px
"w": 400
},
{
"src": "/@imagetools/f491484c76fc44e8c8d84eb7cdef3c4a6749c4e5", // pixel width is also 400px, expected 800
"w": 400
}
]
},
"img": {
"src": "/@imagetools/5ccabd5fe6fbf6f21048ddbb136dde28284f273a",
"w": 400,
"h": 237
}
}
Actually, I noticed there's no such thing as a density
directive according to the docs: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md
So I'm not sure where you got the idea that such a directive exists?
@benmccann It's been months since I've touched this, I don't recall. Sorry
https://github.com/search?q=repo%3AJonasKruckenberg%2Fimagetools%20density&type=code Maybe noticed in the metadata output and misunderstood at that time. Feel free to close or reopen as a feature request, if you're maintaining this now.
Looking forward to the official SvelteKit image component or function.