[@astrojs/image] Double generation of same image format

[itsmatteomanf]

What version of astro are you using?

1.5.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Whenever you add a <Picture /> tag in your page this will produce, during build time, 2 identical images of the last format in the array.

In the reproduction link below a build is required (which most likely requires a download given StackBlitz's free plan doesn't allow image files), as the HTML is actually correct, but points in the <source> and the <img> tags to different images, even if they are the same format, dimensions, etc.

<Picture 
  src="https://source.unsplash.com/random/600x600"
  widths={[600]}
  aspectRatio={1}
/>

This means that the source above will generate, with the second and third file identical, but duplicates of each other.

<picture class="astro-EI35XRNH">
  <source type="image/avif" srcset="/assets/600x600_Z1QEYNY.avif 600w" class="astro-EI35XRNH">
  <source type="image/webp" srcset="/assets/600x600_Z1Hyepj.webp 600w" class="astro-EI35XRNH">
  <img src="/assets/600x600_t6jY2.webp" class="astro-EI35XRNH" loading="lazy" decoding="async">
</picture>

This is valid for all possible formats array. The last in the array (which I presume makes the default ["avif", "webp"]) will be duplicated.

The only slight variation from the "default" behaviour is when putting in "jpg" as a format by mistake, which will then produce 2 identical, but with different extension (.jpg and .jpeg) files.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-issue-5185?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.