Picture component generates unused images #8866
Description
Astro Info
Astro v3.3.1
Node v18.15.0
System macOS (arm64)
Package Manager npm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
Astro picture component with widths parameter does some additional image conversions that results in additional files that don't appear to be used in the resulting <picture> element.
Example:
For the following Picture component:
<Picture
src={entry.data.image}
alt={entry.data.imageAlt}
loading="eager"
sizes="(max-width: 448px) 400px, (max-width: 810px) 750px, 1050px"
widths={[150, 450, 750, 1050, 1350]}
formats={['avif', 'webp']}
fallbackFormat="jpg"
/>
Astro generates 19 images, across three formats:
6 avif images:
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1pnsD2.avif - 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_1ITCLY.avif - 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZbYoAV.avif - 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_1Rmfrw.avif - 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z3wLVo.avif - 1350w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1JRUr3.avif - original size
6 webp images:
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_MCac0.webp - 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z18gRbU.webp - 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_211ee6.webp - 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZH624x.webp - 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2rc4lt.webp - 1350w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z14rTcA.webp - original size
7 jpeg images:
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZPyrQr.jpg 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2iIDyz.jpg 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_mOBaE.jpg 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZL0UCU.jpg 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2nhaM6.jpg 1350w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1tQeKo.jpg - original size
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b.jpg - original size
However, when inspecting the resulting <picture> element:
<picture>
<source
srcset="/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1pnsD2.avif 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_1ITCLY.avif 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZbYoAV.avif 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_1Rmfrw.avif 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z3wLVo.avif 1350w"
type="image/avif">
<source
srcset="/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_MCac0.webp 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z18gRbU.webp 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_211ee6.webp 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZH624x.webp 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2rc4lt.webp 1350w"
type="image/webp">
<img
src="/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1tQeKo.jpg"
srcset="/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZPyrQr.jpg 150w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2iIDyz.jpg 450w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_mOBaE.jpg 750w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_ZL0UCU.jpg 1050w,
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_2nhaM6.jpg 1350w"
alt="A book held up against the treeline"
loading="eager"
sizes="(max-width: 448px) 400px, (max-width: 810px) 750px, 1050px"
width="1440"
height="1440"
decoding="async">
</picture>we only reference 16 out of 19 files.
The files that do not get referenced:
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z1JRUr3.avif - original size
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b_Z14rTcA.webp - original size
/_astro/benhamin-labatut-kada-prestanemo-da-razumemo-svet.d1f84f2b.d1f84f2b.jpg - original size
Two questions:
- Is there a use case for these original size files that get converted even if they are not specified in the widths array?
- Is the proper file used for
<img>element'ssrcattribute? Even if the idea is to use an original-sized image, is it possible to just copy the original file instead of encoding a new one?
A bit of context: I have a somewhat larger blog with plenty of images that I'm optimizing with an out of date Astro integration, but I'm investigating how Astro's new native Picture solution works and this behavior negatively impacts the build times for no apparent use.
Here's a repo with the code for the Minimal Reproducible Example:
https://github.com/bbbbaum/srcset-behavior-investigation
What's the expected result?
Probably the ideal solution would result in 16 images: 15 resized according to the widths list + 1 original file copied from the assets folder.
Link to Minimal Reproducible Example
https://flourishing-souffle-008245.netlify.app/
Participation
- I am willing to submit a pull request for this issue.