Mobile view always gets oversized images. (Full-res or medium-large)

Hi there,

I have a Woocommerce store and run a Pageinsights test. On mobile results it threw a “Serve scaled images” error, with 4.65s potential savings in time load. Not happening on Desktop view… I ran a network metrics test on Chrome and yup, 768x768px images are served for any available phone model (Moto G4, iPhone X…). Smaller screen gets larger files, okay, makes no sense to me.

_______
To rule out wrong configs and plugin incompabilities, I just created a local test site, with only one product. 1024px red image assigned to it. Literally just installed Woocommerce, created a product and didn’t change anything else, not even the stock theme. Nothing.

-The generated image files are 100×100, 150×150, 300×300, 450×450, 600×600, 768×768 and the original file which is 1024x1024px, as shown here:

-Here’s the Chrome network results on Desktop:

A 450x450px is served even though 241.95×241.95px is the thumbnail size according to the inspection tool. But it’s not that far off.

-However, on mobile view the full-resolution image is served on a Moto G4 device:

Can somebody explain to me how this is possible?

If anyone is interested to check this especifically on the store I’m still creating, here’s a link to it (I’m aware it needs to be optimized yet): https://rotulosdacrea.es/tienda/categoria/rotulos-neon/

Thanks in advance