thumbnails of images on the phone larger than on the desktop

Hi,

I'm not sure I see what you mean. I've checked your site and saw that both desktop and mobile use the regenerated smaller file [image-name]-300x300.jpg from the original 600x600 file.

You can try confirming the size of the product thumbnail width used for catalogues by checking Appearance > Customize > WooCommerce.

If you need further, more specific controls for product images, you may have to resort to using third party plugins. Read - https://iconicwp.com/blog/manage-woocommerce-product-image-sizes-3-3/

Also, consider asking WooCommerce about this. :)

Good morning, thanks for the reply.

Yes friend, the settings are as you said, but on the phone it is not regenerated to 300x300, it remains at its original size 600x600.
This is the problem.

Good morning, thanks for the reply.

Yes friend, the settings are as you said, but on the phone it is not regenerated to 300x300, it remains at its original size 600x600.
This is the problem.

Hi there,

Please note: the Woocommerce plugin is responsible for how those images are displayed.
Looking at your catalog images the HTML is specifying width=300 and height=300 and the src-set images includes your 300px wide image.

The browser selects the most appropriate size image it requires to display those images. If the device is a 2x HD / Retina device it will grab an image that is at last twice the size of what is being displayed. As the majority of mobile devices today are Retina equivalent we can accept this as standard.

Couple of scenarios regarding your site:

1. A Plus size mobile device with screen width of 414px ( eg. iPhone 7/8+):
The displayed size of your images is 179px.
Retina looks for x 2 image size of 378px.
The nearest size available that has enough pixels in the 600px image.

2. A small mobile device with a screen width of 320px ( eg. iPhone 5/6 ):
The displayed size of your images is 144px.
Retina looks for x 2 image size of 288px.
The nearest size available that has enough pixels in the 300px image.

So in scenario 1 it uses the 600px image, in scenario 2 it uses the 300px image.

If you want you can register another image size of 400px and maybe in scenario 1 it will select that instead.

NOTE: Some browsers like Chrome don't necessarily obey these rules, especially if the image is within a link - in those scenarios Chrome is more likely to load the largest image size as it 'thinks' that is what will be used on the single post / product page.

I did tests on the iphone 5 and 6, and the catalog's miniatures are at 600x600.
If the test is also done on the pagespeed in the mobile version, it also recognizes all of my catalog images as 600x600.
They even point this out as a "problem" to be solved.

Have you checked with WooCommerce support on this?

As David pointed out, the Woocommerce plugin is responsible for how those images are displayed and we cannot solve anything on our end.

FYI - here is a test i performed using responsive tools.
Device size is set to 320px. The screen pixel density is set to x1 ( ie. NOT retina ):

Here you can see that the 300px wide images are being requested.
Why google is choosing not to respect the src-set sizing is beyond my knowledge.

Perhaps registering a 400px wide media attachment will give google a nearer image size to detect.

Thanks for the suggestions, I will try to see with the support woocomerce, because as I mentioned it is not just the google tool.
On the mobile phones I tested and also on my tablet, they are not being reduced to 300x300, so something must be wrong.

Can you try adding this PHP Snippet:

function db_woocommerce_limit_archive_image_size( $max_srcset_image_width, $sizes_array ) {
	if ( is_shop() || is_product_category() ) {
		return 300;	
	}
}
add_filter( 'max_srcset_image_width', 'db_woocommerce_limit_archive_image_size', 10, 2 );

If correct it should remove any srcset images that are greater the 300px on the archive pages.

Unfortunately it didn't work, I added and cleared the cache but nothing changed.
Anyway thank you.

It worked for me on my test install.
I would like to point out that it did remove that 'warning' from google but it made absolutely no difference to the page speed insights ranking.

If you want to add back the code i can take a quick look?

I installed it again, for you to take a look.
In my case it remained the same on the cell phone and the warning also remained.

You can see here that the code is working:

The largest size image listed in the DOM is 300px. There is no 600px. So i can only assume that Google is pickup on a cached page. If you have any server level page caching or cloudflare can you try clearing that?

I cleared everything now, in Wp Super cache, on the server and on cloudflare.