Why are my images so blurry?

Hi everyone, hope you are all well.

I have 2 products on my website, and 1 image for each product.

Towards the bottom of my page I have a "Choose your product" section where there is the image for each product, side to side and users can click on which they want.

For some reason, the images there look super blurry, but when they are clicked and taken to the actual product page, they are super crisp and detailed.

They are the same image, so I think there is some issue with how they are being displayed on the home page.

I tried playing with the image sizes, but the same issue occurs.

The image sizes are approximately 670×640 pixels in size.

If anyone could help me understand the issue and how to fix it, that would be amazing and would save a lot of effort and time.

Any comment is greatly appreciated!