To large thumbnails on mobile

  • Resolved mats1

    (@mats1)


    3 years, 10 months ago

    Hi!

    I have a problem with the size of the thumbnails on category pages on mobile which are larger than on desktop.

    Let me go into the details.

    In woocommerce following image sizes are set. I had the sizes confirmed with the plugin simple image sizes

    Thumbnail : Width 386px
    Single image: width 480px
    Thumbnail single image: width 113px

    All Images are cropped in 4:6 ratio

    When inspecting the network traffic on a product category page I see following:
    On desktop, thumbnails are downloaded with a width of 386px which is correct.
    On mobile thumbnails are downloaded with a width of 768px which is too big. It takes an image size which is named ”Medium Large size”

    Why is a larger image downloaded to the browser on mobile?
    I can see that srcset is used to determine what image to load but it fails.
    I have set the images widths according to its actual container in catalog and on single product page.

    We use the Astra theme but have tested on Storfront and Twenty Twenty one as well and it is the same behaviour on all themes.

    • This topic was modified 3 years, 10 months ago by mats1.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @mats1,

    Could you please try using the Regenerate Thumbnails plugin to regenerate your thumbnails and see if that helps?

    Do let us know how that goes.

    Thread Starter mats1

    (@mats1)

    Thanks Sunday for a quick reply.
    So I installed the plugin. Just to speed up the test I regenerated a couple of images for products on a certain category. I afraid it didn’t solve the problem. It still download large thumbnails on mobile but correct on desktop
    I have regenerated product images for following category /shop/women/womens-jackets/

    Thread Starter mats1

    (@mats1)

    Just did some more testing this morning. Disabled all plugins except Woocommerce and used our main theme which is Astra but still the same result. When I inspect the element the src is correct but still it use a larger image. You can see it here

    Plugin Support Shohan Hossain Nabil – a11n

    (@sohanhossain)

    Hello @mats1,

    It’s been a while since you posted and you might have already found a solution. If you are still having the problem then please do let us.

    Thanks!

    Plugin Support Shohan Hossain Nabil – a11n

    (@sohanhossain)

    Hello @mats1,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘To large thumbnails on mobile’ is closed to new replies.