feature request: pixel density

[jasongitmail]

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:

1. 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.

2. 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.

[stryaponoff]

+1 I have the same problem

[benmccann]

Can you check if this happens with 5.0.5?

[jasongitmail]

@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
  }
}

[benmccann]

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?

[jasongitmail]

@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.