[MatthieuHParticipant]

Hi there,

I’m currently using the shortcode from woocommerce [product id=”X”] to place some products in my home page.
Everything works smooth, the problem is with google insight, that advise me to downscale my images.
After applying the shortcode and controlling size with css, the thumb stands like these:

As you can see, I am downloading a 862×862 image and displaying it at 337×337, a much smaller css.
I know it would depend in the resolution, but if I could change it at least to something like 400×400 would help my load time and google would be happier.

Do you guys know how can i do this?
Thanks very much

[Prasant RaiModerator]

Hello Lucas,

Thanks for writing in!

To improve the page load time and user experience we request you to kindly resize the image before uploading.

Hope that helps.

Thanks.

[MatthieuHParticipant]

I think you did not understand, wordpress is generating those thumbs, take a look:

As you can see, I have multiple thumbs generated by wordpress, configured by theme X to help me with image size.
The problem is, the shortcode is using a large thumbnail generated, it could use 420×420 for exemple.

I need to know how can i achieve these.

Thanks

[RadModerator]

Hi Lucas,

Yes, wordpress generate those thumbnails only if the uploaded image is large enough to create smaller version of it.

Example, if you uploaded 862×862 then wordpress can generate 862×482, 420×420, and smaller. Buf if you uploaded a 420×420, then wordpress can only generate 300×300, 200×200, and smaller and it can never be greater than 420×420. That’s why we suggest you to upload the image of exact size based on your preference.

And about google, please be noted that google has different analysis tool for mobile and desktop. And it could be suggesting optimization based on static layout of a site. X theme is responsive which both targets desktop and mobile, thus images should adapt to both larger and smaller screen. It’s easier to make larger image smaller through css, but making the image larger will be pixelated. Example, a mobile phone which has 768px or 1024px screen width displayed an image of 420px, then it will be pixelated and blurry since the layout will accommodate the width 100%. Please also note that there are also retina displays which requires double the size of an image. The safe size is about 960px to 1200px, or larger for retina displays.

You can’t have all standards all at once, you have to choose one and eliminate some. It’s up to you if you will follow google’s optimization practice for desktop site, or follow the majority of devices.

Thanks!

[MatthieuHParticipant]

Yeah I get it… I understand the principle.

The only problem is that I need 1200px product image size for the single product page template.
I was trying to understand why does the shortcode [product id=”X”] randomly chooses the size of 862px.
I cannot upload a smaller size because it would hurt the resolution of my single product view.

I was just asking where in the files there is a code that says to wordpress “hey, don’t use full image here, use 862×862” and then I would customize it, but I don’t think you can help me out here.

Thanks for the effort anyway.

[ZeshanMember]

Hi Lucas,

This could technically be possible with custom development to change the size of products images but would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Author]

Posts