What are Basel's woocommerce Image size settings?

Hi there –

I want to set image sizes exactly as in demo. The following
Product Image on product page
product image thumbnails on catalog pages
etc..

I checked Customize->Woocommerce. There it is 1200 and 600. But I want to know what are the woocommerce image settings for basel demo. Please advise.

Hello,

1200×600 is the size set by default. You need to set “Uncropped”. You will get rectangular images.

Best regards

Ok..I also have left it at 1200×600 and set as uncropped. I ran the site on gtmetrix and I got a very low score. and the main reason is stated as below. All product images are having the same issue.. For example..

under “serve scaled images” section

https://<i removed domain>.com/wp-content/uploads/2018/10/Tanjore-painting-material-chalk-arabic-gum-600×766.jpg is resized in HTML or CSS from 600×766 to 214×273. Serving a scaled image could save 75.4KiB (87% reduction).

on the shop page I have 4 products in a row..and the page has a sidebar..
should I make further settings?

Hello,

1200×600 is not a must. You can try images of smaller size. Also you would better optimize your images before uploading.

Best Regards

ok, i shall do that..

For the basel demo, what are the values entered in the customize > woocommerce > product images section? Is the default 1200×600 or some other custom value ? I’m asking over and over because I want to set it up like the demo..

Hello,

Basel Demo has 1200x600px as I told above.

Best Regards

So in both the settings are 1200/600. I have my actual uploaded product image size to be 870×1110. On basel also it is 870×1110. I’m running both my website and demo.xtemos.com/basel on Gtmetrix.

In Pagespeed, basel demo shop page gets a score of 100 under ‘serve scaled images’ screenshot -> https://snag.gy/vH8IZa.jpg

But my website, is scoring 0 here .. and lists all my product images as requiring scaling. screenshot –> https://snag.gy/rEvkD4.jpg

What could be the reason ? Why is basel not getting the same ‘serve scaled images’ error for image rendering on catalog/grid page?
My images are well optimized are around 100-140 kb. Basel product images are also around this size.

Please help me out here because the site is loading very slow.

Hello,

Taking into consideration the container width of 213px you should set image width of 220px.

Best Regards

[Author]

Posts