Optimization of Images « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Abundance

Optimization of Images

7 posts from 3 voices

Started 8 months ago by kitticraft
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

kitticraft
Member

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,024x1,024 to 160x160. 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,024x1,024 to 160x160. Serving a scaled image could save 636.3KiB (97% reduction).
http://kitticraft.com/.../ZuluHut-300x300.png is resized in HTML or CSS from 300x300 to 160x160. Serving a scaled image could save 83.1KiB (71% reduction).
http://kitticraft.com/.../Tsuki-300x300.png is resized in HTML or CSS from 300x300 to 160x160. Serving a scaled image could save 66.2KiB (71% reduction).
http://kitticraft.com/.../X-300x300.png is resized in HTML or CSS from 300x300 to 160x160. Serving a scaled image could save 51.8KiB (71% reduction).
http://kitticraft.com/.../Banner2.jpg is resized in HTML or CSS from 958x371 to 930x340. 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

Posted 8 months ago #
Mya

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

Posted 8 months ago #
kitticraft
Member

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.

Posted 8 months ago #
Ismael
Moderator

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

Posted 8 months ago #
Ismael
Moderator

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

Posted 8 months ago #
kitticraft
Member

Thanks Ismael

Regards,
Lawrence

Posted 8 months ago #
Ismael
Moderator

Hey,

Glad we could help.

Regards,
Ismael

Posted 8 months ago #