Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1291511
    lemag
    Participant

    I have been looking around the forum but I did’t really understand how to fix the issue I am having with my website images.

    The URL is http://gamerobo.visualpath.net/

    The problem is this:

    On a product page, for example http://gamerobo.visualpath.net/product/doom/ each small image thumbnail is loaded at 600×600 px and displaying at 70×70 px. This is a tremendous amount of page size loaded unnecessary which causes a bad page load speed and a poor google pagespeed score. I would like to be able to use more appropriate images for those thumbnails. I saw that wordpress already generates 150×150 px images so I would like to set it to also generate 100×100 px images which then will be used as the square thumbnails on the product page. This will remove a lot KB of useless image size and make the website load faster.

    Waiting for your reply.

    #1291512
    lemag
    Participant
    This reply has been marked as private.
    #1291586
    Thai
    Moderator

    Hi There,

    Please add the following code under functions.php file locates in your child theme:

    add_filter( 'single_product_small_thumbnail_size', 'x_product_small_thumbnail_size', 999 );
    function x_product_small_thumbnail_size(){
    	return 'thumbnail';
    }

    Hope it helps 🙂

    #1291614
    lemag
    Participant

    That worked. Is there a way I can generate 70×70 px images and use those as thumbnails? I want to reduce the size as much as possible. Also, if I create a 70×70 px thumbnail how can I regenerate all images?

    The second issue I want to sold is if there’s a way I can resize the main image (the cover) which is 564×400 px to load at 523×371 px instead of being scaled down? Basically I would like to do the following:

    1. Upload an image which is 564×400 px which is the larges possible displayed on the website.
    2. Create a 523×371 px image and use it on load it instead of the larger one above.
    3. Create a 380×269 px image and use it on smaller screens, depending on screen resolution.

    The same applies for homepage images. Google is currently penalizing slow websites and if you check the latest report it clearly says we need to optimize images https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fgamerobo.visualpath.net&tab=desktop

    All the images have been optimized in term of speed using 2 plugins but they are not optimized in terms of dimensions and this clearly downgrades our website.

    Thank you.

    #1292221
    Lely
    Moderator

    Hello There,

    We do have predefined image size for products. For detailed explanation, please do check this thread:https://community.theme.co/forums/topic/product-images-woocommerce/

    Hope this helps.

  • <script> jQuery(function($){ $("#no-reply-1291511 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>