next/image not properly sizing images

[pjaws]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:12:57 PDT 2022; root:xnu-8020.240.7~1/RELEASE_X86_64
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.8-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue

https://github.com/pjaws/next-image-example

To Reproduce

With fill prop

1. Create div with desired aspect ratio padding, i.e. padding-top: calc(2/3 * 100%);
2. Add next/image as child of that div
3. Add sizes attribute with desired breakpoints/widths
4. Images are not requested at these sizes/srcset is always the same regardless of what's in sizes

Without fill prop, external image

1. Create next/image with remote image, width and height props specified
2. Image is sized correctly at large screen sizes
3. Image is actually much larger at smaller screen sizes

Without fill prop, local image

1. Create next/image with local image, no width or height specified
2. Image is always served at maximum resolution

Describe the Bug

In almost every case, the image requested by next/image is larger than expected, resulting in unnecessarily large file sizes.

For images with the fill prop, the sizes attribute doesn't seem to actually do anything. In the screenshot below, images that should be around 396px are loading at 640px (1200px screen, 33vw image).

For images without fill, instead of generating smaller files for smaller devices, the requested image is usually much larger than the specified width and height. In the screenshot below, an image that should be a maximum of 800x533px is being loaded at a width of 1920px on a screen 375px wide.

This can also be seen on your own example page where the local Vercel image is set to 1000x1000px, but actually loads the full-size 1600px image at a device width of 375px.

Expected Behavior

"Always serve correctly sized image for each device"

I'm not expecting magic, but currently next/image is doing the opposite of what I want/expect. It would be nice to have some way to load smaller images at smaller screen sizes.

Which browser are you using? (if relevant)

Chrome 108.0.5359.124

How are you deploying your application? (if relevant)

No response