Easier creation of `<picture>` tags

I just tried the experimental srcset option

For my example, it created one large srcset:

/@imagetools/af1896684ba60c3fa5b12a0609e28b3fce179657 1440w, /@imagetools/d9f7937f7986fa94eac8fbdcd50acb2ec8db14a2 1440w, /@imagetools/0f418c158ad24a2c7a101f8847a727731a0c1b55 1440w, /@imagetools/c6ee3dba26e4ad983a4ae2ea2a69076492153ffc 800w, /@imagetools/84620b40939e5c4ca0a61b4724c29a8ee2057f95 800w, /@imagetools/91bce48b94bc945a6df13919b8ec4b7ed8521c17 800w

But really what I need is something much more complex:

<picture class="s-Ou-fLRYjMacr">
   <source type="image/avif" srcset="/@imagetools/425c37d1844269144a629fd6607654a047acb328 2x, /@imagetools/0ac134d9b8e160cc8352e48344071d15855e0868 1x" class="s-Ou-fLRYjMacr">
   <source type="image/webp" srcset="/@imagetools/9b27e371177bb36997e6b36e9d0ebee369889fa6 2x, /@imagetools/ddc6d76b452971e6f9b5ac6e5f921b04c2b8b54d 1x" class="s-Ou-fLRYjMacr">
   <source type="image/png" srcset="/@imagetools/2e89026d6e552fae215d9952d95d67ff974960fa 2x, /@imagetools/ef93de319f4f4f4ad4f7b555ab260d4ffd31d7c4 1x" class="s-Ou-fLRYjMacr">
   <img src="/@imagetools/2e89026d6e552fae215d9952d95d67ff974960fa" alt="SvelteKit illustration" class="s-Ou-fLRYjMacr">
</picture>

A couple things would be helpful here:

• Output grouped by format
• Normalizing the output format for use in the type attribute (always return jpeg instead of sometimes jpg and sometimes jpeg)

We could fallback to the largest image of the user-provided type.

If the srcset could be generated that would be great as well. Ideally it could include the 1x/2x for retina screens as well as the resolution switching based on screen width. This is the hardest one for me to understand what the API should look like as I don’t have a ton of understanding of responsive images. It may be interesting to see what Next does here: https://github.com/vercel/next.js/blob/bd82f690e5a2adebdf715e0e4406c1f29e93ff6a/packages/next/client/image.tsx#L288. Also, for further reading: https://ericportis.com/posts/2014/srcset-sizes

On the Svelte side, we’d need the ability to create a <picture> tag and possibly the ability to create a <source> tag (for art direction). Maybe also the ability to create an <image> tag for users who use a CDN.

[benblazak]

i did something similar to kevmodrome, except in a component

if anyone wants to see the version with way too many comments (i learned a lot while writing it): https://gitlab.com/benblazak/homepage/-/blob/0cb4a432b3b3e9697f1a4a796d203884de59bb7f/src/lib/Image.svelte

shortened version:

<script lang="ts">
  /**
   * the output of a vite-imagetools import, using the `meta` query for output
   * format
   */
  export let meta: { src: string; width: number; format: string }[];
  // if there is only one, vite-imagetools won't wrap the object in an array
  if (!(meta instanceof Array)) meta = [meta];

  // all images by format
  let sources = new Map<string, typeof meta>();
  meta.map((m) => sources.set(m.format, []));
  meta.map((m) => sources.get(m.format).push(m));

  // fallback image: first resolution of last format
  let image = sources.get([...sources.keys()].slice(-1)[0])[0];

  export let sizes = `${image.width}px`;
  export let alt: string;
  export let loading: string = undefined;
</script>

<picture>
  {#each [...sources.entries()] as [format, meta]}
    <source
      {sizes}
      type="image/{format}"
      srcset={meta.map((m) => `${m.src} ${m.width}w`).join(", ")}
    />
  {/each}
  <img src={image.src} {alt} {loading} />
</picture>

[croganm]

You are indeed correct. I swore that was valid JS too but for some reason VSCode was throwing an error. I was just messing around and I think when I removed the lang=“ts” the errors went away but I forgot I changed that portion.

I haven’t attempted to pass in a single resolution and format just because that use case is a little more specific so I appreciate you catching that before I ran into that error and wondered what was going on!