search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
45.78k stars 2.4k forks source link

Picture component generates unused images #8866

Open bbbbaum opened 11 months ago

bbbbaum commented 11 months ago

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

Princesseuh commented 11 months ago

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 https://github.com/withastro/astro/pull/8821

icui4cu-web commented 4 months ago

Those are currently copied in the bundle for various technical reasons (but don't slow down builds in any ways)

Need an option to disable this behavior and not copy the original images into the build. For example: I have original images sized 3840x2160 and about 10MB in size. In the project using , they are displayed at a resolution of 300 pixels (50KB). There are many such photos on my website. Not only generated images are included in the build, but also the originals. Instead of the usual 100MB, the site takes up 20GB, forcing me to pay for a more expensive hosting plan and causing inconvenience during copying.

rikur commented 2 months ago

The option to exclude the original or to set a maximum image size in bytes would be very welcome.