Home Forums WoodMart support forum Regarding image optimization on single product page

Regarding image optimization on single product page

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #138019

    webaits
    Participant

    Hi,

    I’ve following image sizes:
    150×150
    450×450
    768×768
    900×900

    On single product page, I see that the 900×900 sized image is also loading along with the full sized image. Full size image usually falls under 1000-1500px.

    So I feel that loading 900×900 is a waste of resources and rather the 9xx, I should replace it with the full sized one. What would you say about it?

    Where is the 9xx used on single product page?

    If the replacement is better then which templates I need to copy and amend in the child theme? Please also mention updated code.

    If there is any other file following the similar concept please mention that as well.

    Also, what would happen if increase the size of full sized image to around 2000px? Will the presence of 9xx would be beneficial in that case?

    Thank you

    #138052

    Artem Temos
    Keymaster

    Hello,

    Could you please check how it works with some default WordPress theme like twentysixteen to understand is it our theme issue or not?
    Our theme doesn’t control products images sizes and we don’t have documentation for their sizes.

    Regards

    #138196

    webaits
    Participant

    Hi,

    I don’t have any issue with the image sizes.

    My concern is that the theme is using woocommerce_single or similar image size string to render the corresponding image, which is equivalent to 900×900, and the full size one.

    I’m willing to render full size only instead of the woocommerce_single or similar.
    So that rather than loading both full size and 900×900, I could just use full size.
    Saving one additional HTTP request and resource loading worth 100KB on single product page.

    So in which files do I need to change and the update code?

    Please check what images are loading using network tab on console to the following page:
    https://www.craftesy.com/women-linear-pattern-kurta/

    It will help you to understand my concern more 🙂

    Thanks

    #138209

    Artem Temos
    Keymaster

    It is how the WooCommerce plugin works. You can customize the single product page images in files

    woocommerce/single-product/product-image.php
    woocommerce/single-product/product-thumbnails.php
    #138667

    webaits
    Participant

    Hi,

    Let me refine the issue a bit more. My image dimensions are as follow:

    woocommerce_thumbnail = 450×450
    woocommerce_single = 900×900

    I’ve tried changing ‘woocommerce_single’ with ‘full’ in those two files to load full image rather the 900×900 for the main image container on single product page.

    However, this is not taking effect and I’m still getting the 900×900 on single product pages. What am I missing?

    Thanks

    #138681

    Eric Watson
    Participant

    Hello,

    Try to install this plugin and regenerate all thumbnails https://wordpress.org/plugins/regenerate-thumbnails/

    Kind Regards
    XTemos Studio

    #138689

    webaits
    Participant

    Hi,

    What is the sense of using regenerate thumbnails? I already have all the images of given sizes.
    Please read the question again in my previous comment. I want to use ‘full’ instead of ‘woocomerce_single’ on single product page.

    Thanks

    #138737

    Eric Watson
    Participant

    Try to change $thumb_image_size = 'woocommerce_single'; to $thumb_image_size = 'full'; in woodmart/woocommerce/single-product/product-image.php

    Kind Regards
    XTemos Studio

    #138904

    webaits
    Participant

    Hi,

    I’ve correctly done as you said. However, it was not successful on majority of single product pages.

    This is because of the presence of srcset attribute generated by WordPress. Further, even I disable that through filter, Woodmart implementation still brings the 900×900 images.

    It seriously didn’t make me any sense to load both, a full size image and woocommerce_single (900×900).

    5 variations, 2 images per variation, woocommerce_single for each = 10 HTTP requests x ~150KB each.

    Sir, I could save almost 1.5MB if you could be flexible about the trouble.

    I’ve created a feature request for the same:
    https://xtemos.com/forums/topic/features-requests-2/page/13/#post-138899

    Thanks

    #139163

    Artem Temos
    Keymaster

    Hello,

    Srcsets are not controlled by theme and it is how it is server by WooCommerce and WordPress. Just check how it works with default Storefront theme for example.

    Regards

Viewing 10 posts - 1 through 10 (of 10 total)