Astro transformer format

[jlarmstrongiv]

I may be misunderstanding how the transformers or Astro components work, but I’m not sure how to set webp as the format. The url param f=webp doesn’t work, and I can’t seem to get the <Source /> component to work either (maybe I’m setting type="image/webp" incorrectly?). Anyway, tips to get the webp format working are much appreciated.

The <Image /> component works great otherwise (once the typing is fixed)

[jlarmstrongiv]

@ascorbic do you have any suggestions for where the url parameter isn’t getting passed correctly in https://github.com/ascorbic/unpic/blob/main/src/transformers/astro.ts ?

[ascorbic]

Is it adding the param to the URL? Have you tried manually opening the image and changing the param? Are you able to get it to generate the right format?

[jlarmstrongiv]

I have confirmed that the Astro _image endpoint can generate other image formats, like webp After more investigation, it seems

Setting the format on the image component fails when trying to add the param to the URL

        <UnpicAstroImage
          src="/static/assets/images/owl.jpg?f=webp"
          cdn="astro"
          layout="constrained"
          width={1023}
          height={682}
        />

Whereas setting the format using picture and source components works

        <picture>
          <UnpicAstroSource
            type="image/avif"
            src="/static/assets/images/owl.jpg"
            cdn="astro"
            width={1023}
            height={682}
          />
          <UnpicAstroSource
            type="image/webp"
            src="/static/assets/images/owl.jpg"
            cdn="astro"
            width={1023}
            height={682}
          />
          <UnpicAstroSource
            src="/static/assets/images/owl.jpg"
            cdn="astro"
            width={1023}
            height={682}
          />
          <UnpicAstroImage
            src="/static/assets/images/owl.jpg"
            cdn="astro"
            layout="constrained"
            width={1023}
            height={682}
          />
        </picture>

P.S. I think my initial user error was not setting the cdn="astro"

EDIT: I can confirm that avif image transformations work in development, but fail in production (webp is fine)

[ascorbic]

What you can do is pass in one of the generated endpoint URLs. That shoudl let you set the format, and it should also detect it as Astro

[jlarmstrongiv]

Passing in one of the generated endpoint urls didn‘t work, since the passed url ended up in the href url parameter