Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] thumbnails of images on the phone larger than on the desktop

Home Forums Support thumbnails of images on the phone larger than on the desktop

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1496157
    Vinícius

    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.

    #1496408
    Elvin
    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.jpg from 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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1496687
    Vinícius

    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.

    #1496690
    Vinícius

    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.

    #1496769
    David
    Staff
    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.

    #1496956
    Vinícius

    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.

    #1497286
    Leo
    Staff
    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.

    #1497311
    David
    Staff
    Customer Support

    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.

    #1497327
    Vinícius

    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.

    #1498218
    David
    Staff
    Customer Support

    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.

    #1500965
    Vinícius

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

    #1500971
    David
    Staff
    Customer Support

    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?

    #1500973
    Vinícius

    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.

    #1500998
    David
    Staff
    Customer Support

    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?

    #1501008
    Vinícius

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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.