withastro/astro

Picture component generates unused images

bbbbaum opened this issue · 1 comments

bbbbaum commented

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:

  1. Is there a use case for these original size files that get converted even if they are not specified in the widths array?
  2. Is the proper file used for <img> element's src attribute? 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.
Princesseuh commented

Is there a use case for these original size files that get converted even if they are not specified in the widths array?

This is a side effect of densities, where densities has the original image as a 1x density.

I'll have to think about how to handle this for widths, because the way the API is designed works perfectly for img and densities, where you have one "main" image in src and other variants in srcset (or for the latter, all images in srcset), but for picture and widths, it definitely does generate more images than it should, hmm

I'm not sure about the added .jpg, it seems like it's not an encoded image? Is it possible it's just the original assets? Those are currently copied in the bundle for various technical reasons (but don't slow down builds in any ways)

Is the proper file used for element's src attribute? 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?

You typically don't want this, because the processing will still result in a smaller image than the original.

I'll note that if your concern is build speed, in addition to having caching between builds, we're currently working on improving performance in the following PR #8821