Responsive images generate original resolution images despite specifying `widths`

[fredriknorlin]

Astro Info

Astro                    v5.14.3
Node                     v20.19.1
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When using the <Picture> component with layout: 'full-width', Astro generates additional images at the original resolution, even when widths are defined.
These original-size images are not used in the generated HTML output, yet they consume a large portion of the build time because compressing large images is slow.

To reproduce

I have this Picture configuration in my project: https://stackblitz.com/edit/github-nafzsai2

<Picture
    src={Large}
    widths={[100, 200]}
    alt='large image'
/>

And this config:

export default defineConfig({
  image: {
    layout: 'full-width',
    responsiveStyles: true,
  },
});

1. Run astro build
2. I have made a small script to print file sizes: node file-sizes.js (I do not know how to inspect this in StackBlitz in any better way)

Output from file-sizes.js script:

large.CPpNG1Gh.png: 1000x1000 (png)
large.CPpNG1Gh_1IzceY.png: 200x200 (png)
large.CPpNG1Gh_Z1qsVSF.webp: 1000x1000 (webp)
large.CPpNG1Gh_Z2eCWu.png: 1000x1000 (png)
large.CPpNG1Gh_Z2h8yQM.webp: 100x100 (webp)
large.CPpNG1Gh_ZNWH2s.png: 100x100 (png)
large.CPpNG1Gh_gokpE.webp: 200x200 (webp)

Generated html without full size images:

<picture>
  <source
    srcset="/_astro/large.CPpNG1Gh_Z2h8yQM.webp 100w, /_astro/large.CPpNG1Gh_gokpE.webp 200w" type="image/webp"
  > 
  <img 
    src="/_astro/large.CPpNG1Gh_Z2eCWu.png" srcset="/_astro/large.CPpNG1Gh_ZNWH2s.png 100w, /_astro/large.CPpNG1Gh_1IzceY.png 200w"
    alt="large image" loading="lazy"
    decoding="async"
    fetchpriority="auto" sizes="100vw"
    style="--fit: cover; --pos: center;"
    data-astro-image="full-width"
    width="1000"
    height="1000"
  >
</picture>

Observe that this is not used: large.CPpNG1Gh_Z1qsVSF.webp: 1000x1000 (webp). (Arguably I would not want this one to be used either: large.CPpNG1Gh_Z2eCWu.png: 1000x1000 (png))

What's the expected result?

Only the images for the specified widths (100 px and 200 px) should be generated.
No additional original-resolution images should be created when layout: 'full-width' is used, i.e. I want:

large.CPpNG1Gh.png: 1000x1000 (png)
large.CPpNG1Gh_1IzceY.png: 200x200 (png)
large.CPpNG1Gh_Z2h8yQM.webp: 100x100 (webp)
large.CPpNG1Gh_ZNWH2s.png: 100x100 (png)
large.CPpNG1Gh_gokpE.webp: 200x200 (webp)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nafzsai2

Participation

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

[matthewp]

@Princesseuh assigning you to see if this is viable.

[kumarayushkumar]

@matthewp can I work on it?