- This topic has 17 replies, 4 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
Good night, just today I noticed that the catalog thumbnails of my http://www.Personalizei.pt store are bigger on the mobile phone than on the desktop.
That is, they are resized to be displayed correctly but remain in the original size thus causing additional weight.
For example:
The product images are configured to be displayed at 600×600 on the main page.
And in the catalog 300×300
On the desktop everything is ok, they follow this rule.
But when it is on the mobile phone in the catalog, they are 600×600, resized for the screen size but with the original size, thus causing a slower loading.
I would like help to try to fix the size of these images in the catalog also at 300×300 or smaller, since on the desktop they are at 300×300.
Unfortunately, I found no way to define the size of the mobile phone catalog anywhere.Customer Support
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.jpgfrom the original 600×600 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 300×300, it remains at its original size 600×600.
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 300×300, it remains at its original size 600×600.
This is the problem.Customer Support
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 600×600.
If the test is also done on the pagespeed in the mobile version, it also recognizes all of my catalog images as 600×600.
They even point this out as a “problem” to be solved.Customer Support
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 300×300, 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.
- You must be logged in to reply to this topic.
