Speeding Up Website - Scaled Images

[toyseller]

I am trying to speed up my website.

Both gtmetrix.com and Googlepage Speed Insights are highlighting an issue with my scaled images.
Can anyone help with why I am getting these messages and how I get rid of them.

Im using the latest version of zen cart (v1.5.4) and image handler 4 (v4.3.2).

I was under the impression that IH took care of image scaling, therefore not understanding what is causing these messages. Website images have been optimized.

Gtmetrix ...

The following images are resized in HTML or CSS. Serving scaled images could save 59.7KiB (36% reduction).

http://www.tidytoys.co.uk/bmz_cache/...ge.226x169.jpg is resized in HTML or CSS from 226x169 to 182x136. Serving a scaled image could save 3.6KiB (36% reduction).
http://www.tidytoys.co.uk/bmz_cache/...ge.226x169.jpg is resized in HTML or CSS from 226x169 to 182x136. Serving a scaled image could save 3.4KiB (36% reduction).

Google Pagespeed Insights ...

Optimize images
Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by 192.8KiB (80% reduction).
Compressing and resizing http://www.tidytoys.co.uk/…d0383b5da...ge.226x169.jpg could save 8.8KiB (82% reduction).
Compressing and resizing http://www.tidytoys.co.uk/…baf2a550b...ge.226x169.jpg could save 8.5KiB (82% reduction).

ie. these are all bmz_cache files causing these messages
http://www.tidytoys.co.uk/bmz_cache/...ge.226x169.jpg

[mc12345678]

Based on the image names including the size (226x169), it appears that something about your template setup is shrinking the images further. So it's not IH4 that is "causing" this resize but something about how that image is handled after being processed. Perhaps someone with the capability at looking at your css or the page source can find something out about your page's setup to identify the exact cause, but it is NOT IH4 that is causing this.

[mc12345678]

Was able to pull up some tools to check into this. Basically this is what you've got going on. Your maximum image size based on your current configuration for the small images presented on even your main page is 171x128 using this responsive template. The image only gets resized smaller as the screen is reduced in size, but then the images become possible to be displayed larger at a transition point. Anyways, it is the responsive template that is resizing the images that are served. There are two factors at play with this. One is the width of the image is style sized to 33% (three columns of data, therefore 33% of the space is taken for each column in width), then there is an autoresize for the height in css (this maintains the ratio of the image height and width).

You could either reduce the size of the images so that they are not resized as often/much, or consider the slight adjustment that is being performed as acceptable. Or, I guess the entire template/plugin could be reworked to account for the size, but understand that remaking the image(s) every time the screen size is adjusted may affect server side performance until all possible image sizes are generated.

Again though IH4 is doing what it does best and the rest is just being performed at a small size/scale to account for the template/device.

[toyseller]

Thank you for your reply.

I did wonder if it was the template, because of the parts of the message where it said

Is resized in HTML or CSS from 226x169 to 182x136 ... so I did a developers search of my code trying to find 182 but it didnt show any lines with this size.

[mc12345678]

Thank you for your reply.

I did wonder if it was the template, because of the parts of the message where it said

Is resized in HTML or CSS from 226x169 to 182x136 ... so I did a developers search of my code trying to find 182 but it didnt show any lines with this size.

As somewhat pointed out there is more than one way to resize an image, either by directly identifying a specific size (somewhat like IH4 does) and then there is a ratio related size (33% of the width of the main body results in the 182 part)... Responsive templates (like the modified version of what looks like Responsive Sheffield Blue) use ratios rather than hard values to provide the results although the ratio to apply in some cases relates to the screen resolution which is a hard number or range of numbers. :)

[toyseller]

So am I understanding what you have told me ...

"That all responsive templates are going to have the same issues with the photos being resized up and down to allow for being shown on a mobile phone" as this is the nature of how the templates work.

But the nearer I get to using a 171x128 size image then the less resizing will be taking place.

[mc12345678]

So am I understanding what you have told me ...

"That all responsive templates are going to have the same issues with the photos being resized up and down to allow for being shown on a mobile phone" as this is the nature of how the templates work.

But the nearer I get to using a 171x128 size image then the less resizing will be taking place.

Basically correct. On a desktop there will be less resizing, but adjusting the screen size/resolution to what might be displayed on a mobile device, it appears that the image size becomes like 100 in width, so would still have resizing occurring on the device.

There does come a point though where there really is little "speed" gained on the displayed images and if there is still a "speed" issue perhaps a different host would improve the situation... The minor adjustments that are currently occurring are insignificant compared to say providing an image at 1024x1024 and having it resized by the browser to the same 171x128, besides the loss of image quality that would occur in that manner... :/

[toyseller]

I also put my website into www.webpagetest.org and was confused with the results from the images.

Why some images are taking 100ms to show and others are taking 3000ms. - why the orange bar is so long for some images and so short for others.

I dont begin to understand the results ... All my images have been made the same initial size and optimized with the same product, so from a speed point of view, why is this highlighting such good and bad results. Also it is a speed test for the homepage where all the images are shown the same size.

Up to now I havent taken much notice of pagespeed. But after making some changes my selling has increased.

[mc12345678]

I'm not at a device now that allows me to reproduce the results, then to navigate through the page source to see if there is something in the sequence of loading or some other factor that would provide the delayed result(s). There is probably something in the sequencing or perhaps something is not available that is delaying response. Other things to look for would be if https is used in places where http would be sufficient, etc... Reaching off site for content, that type of thing...

[toyseller]

Ok thank you.