Served Scale Images

Hi, I’m having a issue with serving scaled images on pagespeed testers.

I need to have it set so that all Product Images/ Product Category images are set to Medium (258x 258) and all thumbnails (ie. in widgets) are set to 150 x 150 in order to Serve scaled Images properly on my site in order to get the best pagespeed rating possible.

Media Settings:
Thumbnail Size: Max Width: 150 Max Height: 150
Medium Size: Max Width: 258 Max Height: 258
Large size: Max Width: 500 Max Height: 500

I set above settings and the ran Regenerate Thumbnails plug-in. I selected medium size as 258 x 258 as the featured products on homepage are set to this size. I have since noticed after running GTmetrix tests that images on other pages are served as many different sizes (detailed below).
I could change medium settings to 263×263 to suit medium product images and regenerate thumbnails but then Featured products on homepage would fail speed test.

Basically I need served image size to be the same across the site.

Issue arises with following:

Featured Categories section on homepage (6 items, 6 Columns, Masonary layout, Space between categories: 2 ) Served Image Size: 225 x 225

Product Category Pages 4 items across. Served image size: 263 x 263
GTmetrix message: “F060053-Glana-Alu-Safe-Machine-Dishwash-Detergent-20L-1000×1000.jpg is resized in HTML or CSS from 1000×1000 to 263×263. Serving a scaled image could save 75.7KiB (93% reduction).)”

Image has since been resized using WP Smush Pro from 1000×1000 to 500×500, but above GTmetrix message states image was resized from 1000×1000. Why could this be?

Individual product Page:

Main Product Image: size served 404×404 yet Product page image size set to Medium in settings.
Products side widget: thumbnail images served at either 50×50 or 60×60
Related products: served image size: 263×263

Can you please advise?

Regards
Eugene

Hello,

WooCommerce has removed the option to set image sizes from the recent versions. If we force image sizes by CSS code they would not be adaptive and may be deformed. Our theme does not influence the WooCommerce functions and options, at the same time our theme provides the possibility to unify images. So, navigate to Appearance > Customize > WooCommerce > Product Images > configure by your needs as shown here: http://prntscr.com/ixlgke

As for images optimization, setting images sizes for thumbnails and other would not improve your score in page speed testing. For this purpose, you need optimize images. You can optimize images in two ways: http://optimizilla.com/ upload your images and get them optimized for free; another way to find WordPress image optimizing plugin.

Best Regards

[Author]

Posts