How to serve scaled images?

[tkhong]

Hi,

Here’s an excerpt of my GT metrix report: Serve Scaled Images, score is F.

http://www.mekong-merchants.com/wp-content/uploads/2016/11/Marou-80g-Lam-Dong-74-700×904.jpg is resized in HTML or CSS from 700×904 to 213×274. Serving a scaled image could save 99.1KiB (90% reduction).
http://www.mekong-merchants.com/wp-content/uploads/2016/11/Marou-80g-Tien-Giang-70-700×904.jpg is resized in HTML or CSS from 700×904 to 213×274. Serving a scaled image could save 89.6KiB (90% reduction).
http://www.mekong-merchants.com/wp-content/uploads/2016/11/Marou-80g-Ba-Ria-76-700×904.jpg is resized in HTML or CSS from 700×904 to 213×274. Serving a scaled image could save 83.2KiB (90% reduction).
…

I have tried using Regenerate Thumbnails plugin and Force Regenerate Thumbnails, but they do not seem to have made any difference.
What else can be done to serve scaled images to speed up the site?

[Rui Guerreiro – SUPPORT]

Hi,

I’m not sure about this. Will forward to Ed.

-Rui

[Swift Ideas – Ed]

Hi @tkhong

Where are these images being used on your site? If you can provide a direct link we’ll take a look.

Thanks,

– Ed

[tkhong]

Hi Ed!

Sorry for my late reply.

The images are used in Home, Shop and product pages.
Please check:
https://www.mekong-merchants.com
https://www.mekong-merchants.com/shop/
https://www.mekong-merchants.com/shop/coffee/large-company-christmas-gift-set-8x-coffees-13x-chocolates/

There are quite a few images, than can be scaled and optmized for faster loading.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

I Just forwarded again to Ed so he can reply about this.

-Rui

[Tekguild]

I, too, would like to hear from Ed about this.

Currently any Swift Page Builder>Recent Posts block with 4 columns serves a 720×720 or 720×540 image scaled down to 235×235, creating a lot of unnecessary overhead and slowing site load times considerably.

I understand the logistics of making this work properly aren’t easy, but something really should be done about it.

[Swift Ideas – Ed]

Hey guys,

In regards to the sizes chosen, if it’s the product asset, then you set these in the WooCommerce settings – so you need to adjust these based on the size you use. @tkhong – if you are using 4 column shop, then you can reduce these right down (currently you have it set to 700px wide).

As for other images such as the Recent Posts, these are set based on the column size – and you can override with these filters:

$thumb_width = apply_filters('sf_recent_post_item_thumb_width', 720);
$thumb_height = apply_filters('sf_recent_post_item_thumb_height', 540);

If you override in a child theme, you can set the size you need. If you need assistance with this, we can provide example code.

Thanks,

– Ed

[kikaromao]

Hello,

I am having the same problem, my site is considerably slow. Could you please provide further assistance?

Thanks