Image file size optimizations

[williamhaley]

Summary

Next.js seems to be serving up original full sized local images with the Image component even when I request a lower resolution than the original. This is impacting my FCP and LCP scores for Google PageSpeed Insights. PageSpeed recommends I Properly size images; Serve images that are appropriately-sized to save cellular data and improve load time.

Yes, I could resize my source image to optimize it myself, and tweak quality to reduce file sizes, but I guess the reason I'm opening a discussion is that I'm surprised Next.js isn't seemingly doing any image optimizations here by default. That's what I'm most curious about. I feel that the documentation implies that an optimized image will be served on-demand as needed. I take this to mean that a smaller image than the original (in both byte-size and resolutions) should be sent over the wire.

Image Optimization

...

• Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
  ...

https://nextjs.org/docs/pages/building-your-application/optimizing/images

I guess I'm not sure what "correctly sized" really means here.

I have a sample codesandbox project.

stat shows that an avif sample image I'm using for that demo is 83040 bytes. The original/intrinsic resolution/dimensions of the source image are 1204 x 800 px. The largest requested resolution of that image on a rendered page is width={602} and height={400}, but I'm still seeing the original file size in both bytes and dimensions.

Why wouldn't Next.js serve up a 602x400 scaled down/lower weight image? Is this behavior intended? Is this intentional and per-device to acommodate greater pixel-density screens? Is there a specific option needed to optimize for a smaller file size?

Additional information

No response

Example

https://codesandbox.io/p/devbox/focused-sun-q6phl2?file=%2Fapp%2Fpage.tsx%3A11%2C34

[williamhaley]

I think I see what I'm missing here. I glossed over the documentation for sizes on the Image component, and I'm finding this prop plays a bigger role than I realized.

I assumed that prop had more to do with responsive sizing after an image was already pulled down from the image server, but I see now it impacts what image is pulled down in the first place (emphasis mine).

First, the value of sizes is used by the browser to determine which size of the image to download, from next/image's automatically generated srcset. When the browser chooses, it does not yet know the size of the image on the page, so it selects an image that is the same size or larger than the viewport. The sizes property allows you to tell the browser that the image will actually be smaller than full screen. If you don't specify a sizes value in an image with the fill property, a default value of 100vw (full screen width) is used.

Second, the sizes property changes the behavior of the automatically generated srcset value. If no sizes value is present, a small srcset is generated, suitable for a fixed-size image (1x/2x/etc). If sizes is defined, a large srcset is generated, suitable for a responsive image (640w/750w/etc). If the sizes property includes sizes such as 50vw, which represent a percentage of the viewport width, then the srcset is trimmed to not include any values which are too small to ever be necessary.
...
This example sizes could have a dramatic effect on performance metrics. Without the 33vw sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without sizes the user would download an image that's 9 times larger than necessary.
...

The real problem here was my lack of insight with srcset and sizes in general, and how they fit in with Image.

I also think my codesandbox example may be misleading, and not properly rendering images as needed. Locally, with a create-next-app demo, I see sizes having an impact, but I don't see it changing anything in the sandbox. So maybe that's an invalid demo.