<Picture> element inflates image sizes

[NateWr]

Astro Info

Astro                    v4.9.2
Node                     v18.17.1
System                   Linux (x64)
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

When using the <Picture> element to generate smaller image sizes from a source image, Astro produces images with an inflated file size. Images exceed the original file size by as much as 3x.

What's the expected result?

I expect the file size to be no larger than the source image and in many cases smaller than the original image.

The specific code for the reproduction can be found here: https://github.com/NateWr/astro-image-reproduction/blob/main/src/pages/index.astro. (I was unable to reproduce any asset manipulation in Stackblitz -- perhaps this is disabled for security/performance.)

The source image is ~443kb:

$ ls -la src/images 
total 444
drwxrwxr-x 2 nate nate   4096 May 30 10:46 .
drwxrwxr-x 6 nate nate   4096 May 30 10:43 ..
-rw-rw-r-- 1 nate nate 443126 May 30 10:46 city.png

When running npm run build, the following images and sizes are generated:

$ ls -la dist/_astro   
total 3144
drwxrwxr-x 2 nate nate    4096 May 30 10:47 .
drwxrwxr-x 3 nate nate    4096 May 30 10:47 ..
-rw-rw-r-- 1 nate nate 1422477 May 30 10:47 city.tXwVt3cZ_1LlvWd.png
-rw-rw-r-- 1 nate nate  214630 May 30 10:47 city.tXwVt3cZ_GFUrO.png
-rw-rw-r-- 1 nate nate  443126 May 30 10:47 city.tXwVt3cZ.png
-rw-rw-r-- 1 nate nate   85194 May 30 10:47 city.tXwVt3cZ_Z1czD1B.webp
-rw-rw-r-- 1 nate nate  847156 May 30 10:47 city.tXwVt3cZ_Z1NjJbt.png
-rw-rw-r-- 1 nate nate   27330 May 30 10:47 city.tXwVt3cZ_Z2eeOM5.webp
-rw-rw-r-- 1 nate nate  156872 May 30 10:47 city.tXwVt3cZ_ZUquXj.webp

Link to Minimal Reproducible Example

https://github.com/NateWr/astro-image-reproduction

Participation

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

[matthewp]

Can you try passing quality={80}? Wondering if this could be the underlying issue for you: lovell/sharp#3371

[NateWr]

Yes, that brings file sizes down to a more expected range:

$ ls -la dist/_astro
total 1556
drwxrwxr-x 2 nate nate   4096 May 30 12:35 .
drwxrwxr-x 3 nate nate   4096 May 30 12:35 ..
-rw-rw-r-- 1 nate nate 293209 May 30 12:35 city.tXwVt3cZ_1aVQ0G.png
-rw-rw-r-- 1 nate nate  85194 May 30 12:35 city.tXwVt3cZ_2omDQW.webp
-rw-rw-r-- 1 nate nate 443126 May 30 12:35 city.tXwVt3cZ.png
-rw-rw-r-- 1 nate nate 491262 May 30 12:35 city.tXwVt3cZ_Z1O9l35.png
-rw-rw-r-- 1 nate nate 156872 May 30 12:35 city.tXwVt3cZ_Z2eVdgC.webp
-rw-rw-r-- 1 nate nate  76763 May 30 12:35 city.tXwVt3cZ_Z2jxQ4m.png
-rw-rw-r-- 1 nate nate  27330 May 30 12:35 city.tXwVt3cZ_ZX6gIS.webp

Thanks!