Properly size images in Woocommerce

Hi,
Google changed its pâgespeed test, and this is my store result in new one:
https://snipboard.io/QlIPDy.jpg
I am not a Tech but it seems that the uploaded image should the 350×280.

This format is in the library:
https://snipboard.io/lXWFBZ.jpg

And though, that’s according to first image, it’s the 1024×819 which has been loaded and considered by the test.

And if I take the other images, most were loaded in 1024×819, and few ones in 680×544.

Question: Could you tell why all are not loaded in 350×280?

Best regards

Hello,

Basically the product images are controlled by woocommerce and our theme doesn’t influence this. WooCommerce Allows some settings that you can find under Appearance >> Customise >> WooCommerce >> Product Images.

You can read our detailed documentation about image alignment and content in the following link:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards

Hi,

1. you don’t answer to the question. So, again: Could you tell why all are not loaded in 350×280. and I may add though defined so in Customise >> WooCommerce >> Product Images.

2. Your theme influence the layout of the shop / product archives. Then, directly or indirectly, on the size of the images, depending on device, screen resolution etc.

So?

Kind regards

Hello,

Could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?
As we wrote, our theme doesn’t control image sizes on the shop page.

Regards

Hi,

With storefront, the behavior is different
Performance is better -what is logical and normal, even though there is no cache on my staging- but no issue with image size, it is served in 350
https://snipboard.io/IWKcf0.jpg

If I switch back to Woodmart -without adding the widgets for the reasons we talked about- the issue comes back:
https://snipboard.io/sC6bjU.jpg
And Chrome / Developer tools says the same:
https://snipboard.io/LjD91V.jpg

And there is the same behavior on your own demo – for purpose of checking if there could be a browser influence, it’s here with Firefox / Developer Tools:
https://snipboard.io/953GWt.jpg

Kind regards

In this case, please, send us your admin access so we can check how it works and see your configuration.

Hi,
It’ a staging site
Kind regards

Hello,

We just tested with the default WordPress theme and the image file size is the same

https://monosnap.com/file/OCvx3z1SMgGklSSaOtexy6Iq2BgUFL
https://monosnap.com/file/d6nSmiuxSRtbzrvitxcRPFloHP47Iz

Kind Regards

Hi,
Hey, you are not on mobile! Wake up please, who cares about speed on desktops?
Kind regards

But the HTML code is the same both for mobile and desktop devices. Here is a screenshot from mobile device too https://gyazo.com/32760a48c829f74a4b20cdcc9b8c1b88

1. Googles declares differently:
https://snipboard.io/jIW5Kf.jpg
How do you explain?

2. how do you explain this on your demo?
https://snipboard.io/953GWt.jpg

3. How do you explain this?
https://snipboard.io/0XDdRC.jpg

4. How do you explain that results are different between woodmart and storefront?

I know nothing about code, and don’t know how to consider what you send. Supposing that this is showing kind of instruction, it would mean that browsers don’t care, or more probably receive different / conflicting instructions on the page, what constraints them to interprete / decide. What could explain that images are different on firefox, chrome, and edge. But at the end of the game, the image size that is delivered is not the right one… if, as you wrote, this is the settings in appearance / woocommerce that should prevail

When I started with you, 4 years ago, the efficiency was far superior

First of all, please, check again with the default WordPress theme to see how the WooCommerce theme by default. Maybe Storefront overrides standard functionality, we don’t know exactly.

1. & 3. It is because of standard srcsets for the image tag. But anyway, our theme doesn’t influence the image size itself.

2. It is how we configured images sizes in Appearance -> Customize -> WooCommerce.

4. As we said, Storefront might have its own custom function to display WooCommerce images.

Kind Regards

Hi,
Thank the point: storefront delivers exactly what is set in Appearance -> Customize -> WooCommerce.
But Woordmart does not.
So, how can you say that your theme has no influence?

Have you tested with the default theme (not Storefront)?

You saw, or could have seen it on staging … that’s woodmart who is over-riding while storefront respects

There is no other default theme for woocommerce than storefront.
I see that you uploaded 20 / 21, but this is not appropriate, 20/21 is for blog, portfolio, …

Again, point is sharp: PRODUCTS ARCHIVES ON MOBILE.
And sorry, your theme is impacting on this very specific point. All say the same.

Hello,

We just checked one more time with the Storefront theme it also loads large image on mobile https://monosnap.com/file/eYCDNgzODtNA3F6ua6X1buYQOxHCWp
And here is a screenshot with WoodMart https://monosnap.com/file/C5Tl9uzMBFKoyIs77aS8T2qCf1kjl4
We tested on this page https://woocommerce-477426-1641986.cloudwaysapps.com/categorie/noeud-papillon/
Please, let me know if you test it differently and specify the exact product where we can check it also.

Kind Regards

Hi,

This is a fair point.

I checked more and indeed, it depends on the browser. For the same page (store), on “mobile” (if true), and using developer tools (I don’t know how it’s set):
– If you take Edge, they load 350x250g.
– Firefox load 680×544
– Chrome load 3 different sizes, above the others before.

I looked at the sizes on desktop (via save image as), exactly same result.

This means that browser decides in all cases, edge takes small, firefox takes medium, and Chrome takes big, whatever the device, whatever how many products are set per row. I did not expect Chrome to choose the biggest while complaining it’s too big. And fact is it’s independent from your theme.

Sorry…

Looks like we all learnt something there though

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

It depends on srcset attribute of the image tag. Here is an article that might help you http://alistapart.com/article/responsive-images-in-practice/

Kind Regards

[Author]

Posts