Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16181

    Hi,

    I am busy optimizing my site, I am busy with the image optimization and I have a couple of questions:

    1 – What are the best pixel dimensions to use for the product images?

    At the moment I have been making the images 1024 x 1024 @ 72DPI

    2 – I ran a test on Googles PageSpeed Insights and it reported the following:

    http://kitticraft.com/…/YooVee-1.png is resized in HTML or CSS from 1,024×1,024 to 160×160. Serving a scaled image could save 970.7KiB (97% reduction).

    http://kitticraft.com/…/Triad-Post_ph.png is resized in HTML or CSS from 1,024×1,024 to 160×160. Serving a scaled image could save 636.3KiB (97% reduction).

    http://kitticraft.com/…/ZuluHut-300×300.png is resized in HTML or CSS from 300×300 to 160×160. Serving a scaled image could save 83.1KiB (71% reduction).

    http://kitticraft.com/…/Tsuki-300×300.png is resized in HTML or CSS from 300×300 to 160×160. Serving a scaled image could save 66.2KiB (71% reduction).

    http://kitticraft.com/…/X-300×300.png is resized in HTML or CSS from 300×300 to 160×160. Serving a scaled image could save 51.8KiB (71% reduction).

    http://kitticraft.com/…/Banner2.jpg is resized in HTML or CSS from 958×371 to 930×340. Serving a scaled image could save 29.9KiB (12% reduction).

    I am assuming that this report was generated due to the images being used in the product slider on my home page (and the last one from the slideshow). Is there anyway that I can create smaller images for the slider to use, or will it always automatically take the large product image and scale it down?

    3 – Are there any other Abundance related image optimization issues that I should pay attention to?

    Thanks in advance,

    Lawrence

    #90482

    Hi Lawrence,

    Abundance automatically resizes the original image you upload to the size specified in the functions.php file including creating the thumbnail. for the product slider. The largest size is 930 x 930 so you if you wanted you could resize your original images to that instead of 1024 x 1024.

    As far as using smaller thumbnails you could upload a new image to overwrite the one Abundance creates. You’ll find the thumbnails in your media folder which is generally /wp-content/uploads/ unless you’ve changed it.

    Regards,

    Mya

    #90483

    Hi Mya,

    Thank you for your advice, one question though:

    With regards to the product slider, its obviously using images that are 160 x 160, but my product pages are using images that are 300 x 300. Is there any way that I can create the 160 x 160 images for the slider without having to reduce the size of my product page images to the same dimension, I would like to keep them at 300 x 300. Basically I just want to serve the correct image size to the product slider so that I dont waste bandwidth on the home page.

    #90484

    Hi,

    Actually the product slider is still using the catalog image size designated on woocommerce-config > config.php

    $avia_config['imgSize']['shop_catalog'] = array('width'=>300, 'height'=>300);

    Regards,

    Ismael

    #90485

    Hi,

    Actually the product slider is still using the catalog image size designated on woocommerce-config > config.php

    $avia_config['imgSize']['shop_catalog'] = array('width'=>300, 'height'=>300);

    Regards,

    Ismael

    #90486

    Thanks Ismael

    Regards,

    Lawrence

    #90487

    Hey,

    Glad we could help.

    Regards,

    Ismael

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

The topic ‘Optimization of Images’ is closed to new replies.