Total Page Size (6,34mb) / Serve scaled images problem…

[david.joh]

Hello I have started to configure my site and during that process I have tried various web site speed tests.
One of the things that I am wondering about are the total page size. Right now (almost done) the size of my frontpage are 6,34mb.
That seems kind of big to me, I would not want to visit that site on my mobile phone via 3G.

I think the problem is related to a “serve scaled images” issue. I thought I had fixed that when i re-generated my thumbnail but when I performed a second test after writing this post the problem had returned. When I test my site via gtmetrix.com I recive the following message: “The following images are resized in HTML or CSS. Serving scaled images could save 4.3MiB (84% reduction).”

[Kyle – SUPPORT]

Hi

Yes you’re images are too big, look here: http://tools.pingdom.com/fpt/#!/cTTdvq/http://www.kondomappen.se/

I would usually try keep them below 100kb at most, but that’s for background and sliders, your product images should not be that big, for e.g: http://kondomappen.se/wp-content/uploads/2016/01/rfsu_so_sensitive_2-555×710.png is 415kb

You should optimize your images before you upload them to the site

– Kyle

[david.joh]

555×710.png @ 100kb? seems like the quality of the image are going to be kind of bad?
But I could probably re-save them as .jpg and get them down to ~150kb without hurting the quality too much.

However should the images really be resized in HTML or CSS? Why not use thumbnails?

[Kyle – SUPPORT]

I’ve just optimized the image and got it to 84kb, I wouldn’t say you can really notice a loss in quality (see attached)

The theme does not control the image sizes, WooCommerce does, you should set these sizes in WooCommerce > Settings > Products > Display

– Kyle

Attachments:

You must be logged in to view attached files.

[david.joh]

I would argue that the quality is pretty bad, take a look at the red heart in the top right corner.

I have already changed the woocommerce image settings… (see attatched image). I thought that the product images on the front page should use a thumbnail not a html/css resized version of the full image? But that is not the case?

If the html/css scaling is the way it is supposed to work is it possible to reconfigure this so that I can use better quality on product pages and thumbnails for the smaller versions of product images throughout the theme?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

It’s not using the full version and resizing it with CSS, it’s using the catalog image size, see: http://d.pr/i/i8Nu/13WniEwh

– Kyle

[david.joh]

I dont get it?

In your attatchment the image link goes to the fullscreen image, no?
If it is not using full screen images how come that the size of the front page are 6mb+?

[Kyle – SUPPORT]

No, as you can see at the end of the image link are the resized dimensions from your woocommerce settings (-555×710)

– Kyle

[david.joh]

could you send me the link for that resized image and what is the size in mb for that?

[david.joh]

OK so could i change the woocommerce settings (-555×710) to 278×356 or will that screw up something on the product pages or on other places in the theme?

[Kyle – SUPPORT]

There’s a very strange issue happening, you’re original images are actually smaller in file size than the ones created by woocommerce, even though they’re smaller. Never seen that happen before, I will check with the developer to see if he knows what’s happening

– Kyle

[Kyle – SUPPORT]

Ok the issue is with the type of png file you saved your images as, you can read more about it here: https://wordpress.org/support/topic/png-pic-size-increase-after-resize unfortunately I’m not sure what you need to do to your images, but this is the issue. Maybe contact WooCommerce support and they may know how to prevent this happening

– Kyle

[Kyle – SUPPORT]

Using jpegs instead of pngs will work

– Kyle

[david.joh]

OK I see, will re-save the images to .jpg to solve that problem.

But can I change the woocommerce settings (555×710 (See previous image attatchment)) to 278×356 to minimize the size of the products thumbnails or will that screw up something on the product pages or on other places throughout theme?

So instead of scaling 555×710 to 278×356 I would use 278×356 from the beginning in the woocommerce setting for “catalog size”?http://d.pr/i/i8Nu/13WniEwh

[Kyle – SUPPORT]

You could resize the catalog images to 278×356 however on retina screens they would look bad as everything is 2x as big

– Kyle