'NextJS Image component not resizing remote images

It was my understanding that the Image component optimizes, resizes and caches images, but when I view the image it is always the full sized version. I have tried all the layout properties - mostly trying to work with responsive, or fill. Maybe I have misunderstood what this component is supposed to do, or maybe I am missing something.

<Image
 src={process.env.NEXT_PUBLIC_IMAGE_URL + product.image.url}
 width={500}
 height={500}
 layout="responsive"
/>

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source