Easier creation of `<picture>` tags about imagetools HOT 6 CLOSED

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>

from imagetools.

To add on to @benblazak Image component (absolutely incredible by the way, extremely helpful), I edited it slightly for my purposes and maybe others will get some benefit out of it.

1. Removed the typescript portion of the component as my project used javascript
2. Set the default "sizes" attribute to "100vw" (just a preference)
3. Added an "imageClass" and "pictureClass" attribute so you can add classes to either the image or picture tag, which was quite helpful for use with tailwind.

Ideally, there should be easier picture creation, but this is a great option for svelte and probably something they should implement on their end.

<script>
  export let meta;
  // if there is only one, vite-imagetools won't wrap the object in an array
  if (!(meta)) meta = [meta];

  // all images by format
  let sources = new Map();
  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 = "100vw";
  export let alt;
  export let loading = undefined;

  export let imageClass = "";
  export let pictureClass = "";
</script>

<picture class={pictureClass}>
  {#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} class={imageClass}/>
</picture>

from imagetools.

I did this manually on the front-end using the meta feature. Not the most beautiful thing in the world and you get a bunch of unnecessary stuff included when using meta. Just getting the srcset per type would go a long way. something like: { jpg: '...', avif: '...'}

from imagetools.

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!

from imagetools.

I have no idea if this could be an option for svelte or if a CDN is an absolute NoGo, but I've been keeping image conversion off my back with Cloudinary (please excuse the advertising, I'm not paid for this). I just upload a large HRES image there and they deliver whatever is needed or doable by the current browser. Meanwhile also AVIF.
And they have a super generous free plan.
(Also, I'd be pretty curious to know why that's not a good option.)

from imagetools.

Glad to see it getting used ☺️

About this line:

if (!(meta)) meta = [meta];

Are you sure this works when the import has only 1 resolution and 1 format? If I recall,

if (!(meta instanceof Array)) meta = [meta];

is pure js, and necessary in that case.

from imagetools.