Im trying to figure out why my images arent being optimized.

I thought the image component automatically generated source sets for images and fed smaller sized images depending on the viewport width.

I see its generating the source sets in the HTML, but the image for each source set is the exact same size. From what I remember, this was built into the components functionality?

Its converting the images to webp so it's doing something, but its not creating the source sets correctly and I can't figure out why.

This was working in the past, the images were being optimized correctly and it was only about 300 B to load in each image and now its loading at around 32 KB to 64 KB for each image.

All of the images im using are locally stored in the public folder

<Image
  alt={title}
  fill={true}
  src={image}
  sizes="484px, (max-width: 760px) 706px, (max-width: 636px) 620px, (max-width: 390px) 374px"
  className="object-cover"
/>