Blurry product card image – rendered is 486×452 vs 300×279 in real image.

I’m a noob making my own website. It’s pretty much ready but only now I noticed that my product card images are very perceptibly blurry. This happens even with all my CSS turned off. My theme is Shoptimizer. This is their demo https://shoptimizerdemo.commercegurus.com/

Using Inspect, I noticed it’s because on my screen the image is stretched to 486×452 pixels and is 300×279 pixels in reality. Unfortunately my website is still on localhost so I can’t share a link yet but here is it’s HTML:

<img width="300" height="278" src="https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-300x278.webp" class="gallery-image" alt="" srcset="https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-300x278.webp 300w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-1024x948.webp 1024w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-768x711.webp 768w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-990x916.webp 990w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-441x408.webp 441w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-800x740.webp 800w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-150x139.webp 150w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-500x463.webp 500w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED-64x59.webp 64w, https://localhost/Raquet%C3%AAnis/wp-content/uploads/2023/01/GX-Dynamic-Front-Case-IMPROVED.webp 1382w" sizes="(max-width: 360px) 147px, (max-width: 300px) 100vw, 300px">

Why isn’t the 441w or 500w version being used instead of the 300 one? I have no idea how all of these different smaller versions were created. Here is a list of all my plugins:

Autocomplete Address for WooCommerce

Brazilian Market on WooCommerce

Child Theme Configurator

Code Snippets Pro

CommerceGurus Commercekit

Custom Fonts

Elementor

Elementor Pro

FiboSearch - AJAX Search for WooCommerce (Pro)

Folders

Kirki Customizer Framework

MC4WP: Mailchimp for WordPress

One Click Demo Import

Social Media and Share Icons (Ultimate Social Media)

SVG Support

Tidio Chat

WooCommerce

WooCommerce Correios - Cálculo de Frete na Página do Produto (CFPP)

WooCommerce Direct Checkout

WooCommerce Direct Checkout PRO

WooCommerce Tab Manager

YITH WooCommerce Quick View Premium

YITH WooCommerce Wishlist Premium

Yoast SEO

Yoast SEO Premium

I was also using Smush but deactivated it and the problem persisted.

My WooCommerce Image settings in Customize > WooCommerce > Product Images:

https://i.stack.imgur.com/nzR0o.png

I also noticed that for one of them, in one of the pages, the rendered size is 486×488 and the intrinsic size is 1381×1388 so it looks perfect. Unfortunately this same image looks blurry on other pages.

SCREENSHOT OF INSPECT OF CORRECT LOOKING IMAGE (the one in the middle, notice how it’s not blurry):

https://i.ibb.co/0MGxGVZ/image.png

SCREENSHOT OF INSPECT OF INCORRECT IMAGE

https://i.ibb.co/wyPXv6M/image.png

Thank you very much!