I'm using the Next.js <Image> component to display an image, but I’m running into a problem where the image is always set to a width of 3840px. I have the "sizes" attribute set to 1px, but it doesn't seem to take effect.

Here's a picture showing the image size

https://imgur.com/a/J1vl8CW

Here’s the code I’m working with:

import Image from "next/image";
import imageShapes from "../public/unsplash.jpg";

export default function Home() {
  return (
    <main>
      <div style={{ width: "24rem", height: "24rem" }}>
        <Image
          style={{ width: "100%", height: "100%", background: "black" }}
          src={imageShapes}
          alt=""
          sizes="1px"
        />
      </div>
    </main>
  );
}

Here's a live demo

https://codesandbox.io/p/devbox/7djqzn

Despite setting sizes="1px", the image URL generated has w=3840, which is much larger than expected. Here’s a screenshot showing the image using the 3840px version.

According to the Next.js documentation:https://nextjs.org/docs/pages/api-reference/components/image#width, the width and height for statically imported images don't need to be set.

Does anyone know why the image is defaulting to such a large size? How can I ensure it uses a smaller version based on the sizes attribute? Any help would be greatly appreciated!