[Resolved] Facing Server Scaled Images Issue

[Ravi Dixit]

I am using GeneratePress on my website http://www.staymeonline.com everything is going well except serving scaled size images whenever I check my website performance on GTmetrix.

Here is the performance report: https://gtmetrix.com/reports/www.staymeonline.com/QWaFcEDy

I have created custom post type for deals and video on my site, And I am showing 3 latest posts, deals, videos on the homepage. I think this is creating the problem.

This is the only reason my website performance is very low, showing F grade. and maybe, speed is also affecting by this.

And please let me know why my website Total Page Size is 4.93MB?

Please help me to solve this issues.

Thanks In Advance

[Tom]

Hi there,

The issue here is you’re uploading images that are > 1000px wide, but they’re displaying at around 350px wide. If you resize those images to be much smaller, you’ll get better scores.

As for the page size, check the “Waterfall” tab in the report. It tells you the size of each element on the page. I believe most of the issues will be solved by resizing your images. You can also use an image optimization plugin, or run them through a website like this before uploading them: http://optimizilla.com/

Let me know if this helps or not 🙂

[Ravi Dixit]

I am using all featured images are in same size apprx 1000px.
If you resized them to make smaller then it will be not good from the users experience point of view. You can check of the post from my blog let say this one: http://www.staymeonline.com/optinchat
You can see the featured images is in full size if I make it smaller then it will not good. I am showing the same image using WP Show Post plugin on homepage.

Let me know, If I make the changes in the images tab in wp show post and set the size of images to be shown on homepage, will it be solved?

[Tom]

What you can do is try setting a smaller width in Customize > Layout > Blog within the “Featured Images” section.

If you keep the single post options as they are, the full images will remain on the single posts.

Let me know 🙂

[Ravi Dixit]

I have tried as you said above, But can’t see any improvement…

This problem is occurring because featured images are showing with different sizes.

I am also confused by the size I need to change featured images to…
I had changed both archives and single post featured image size to 342×192 as I saw in GTmetrix result.

If I re-upload the featured images with the size mentioned in the report, but It will be affected on the single post also and it will be too small.

Please help me to solve this…

[Tom]

Ah sorry, you’re using WP Show Posts to display the posts.

In that case, you would want to reduce the featured image size within the WPSP settings – not in the Customizer.

Basically, GTMetrix doesn’t like that the images are big, but being displayed as small. They would rather the images be smaller if they will be displayed as such.

[Ravi Dixit]

I have also tried this already, My images are 1280px on single podt and showing in small size on homapage that’s why I am getting issue. If I chage the size in WPSP plugin then it will be still there. Becuase same image will be shown with different size on single post.

[Tom]

I’m not sure I understand.

Are you getting the GTMetrix issue on the page with WPSP, or the single posts?

Either way you just need to reduce the width of your images.

If it’s on single pages, you can reduce the width using the options in the Customizer.

If it’s within WPSP, you can use the settings within the WPSP list.

Right now you’re loading big images within a small area: https://www.screencast.com/t/oHPLIUMJT

That image size can be reduced inside the WPSP settings.

[Ravi Dixit]

It is so confusing…
Let first check my website StayMeOnline.com then check it on GTmetrix.

I am uploading thumbnails for my blog post in the size 1280px x 720px, it is showing in full size on the single post and I am using WP Show post to show 3 recent posts on the homepage which you can see on the homepage. This is smaller than the original images showing on the single post.

Serve scaled images error is curring because thumbnails are showing in different sizes. GtMtrix recommending all those images like “image link” is resized in HTML or CSS from 1280×720 to 342×192. Serving a scaled image could save 979.7KiB (92% reduction).

You can visit the report here https://gtmetrix.com/reports/www.staymeonline.com/s1b4u65j

Please visit my website to understand my problem.

[Tom]

I am uploading thumbnails for my blog post in the size 1280px x 720px

That is too big for the blog page using WPSP. Those posts are only around 400px wide, so the images are having to size down a lot. That’s why GTMetrix is giving you the error. Those images need to be around 400px in width, not 1280px.

GTMetrix doesn’t like when images are resized using CSS. Instead, those small images using WPSP need to be resized using the WPSP settings. Those settings will actually resize the image on the server side of things – not using CSS.

Have you tried changing the image width in the WPSP settings to something like 400px?

[Ravi Dixit]

I did not understand…
Please explain me steps which I need to take…

I am uploading 1280px x 720px image as thumbnail in media.

Full size images are showing on Single post only.

And using WPSP to show 3 recent post on the homepage which has lower size images.

Serve scaled images issue is showing becuase one images showing in different sizes.

Now tell me what do I need to do?
1.Change the pixels of images in WPSP plugin?
2. Upload small images? But when I upload images of 400px then it is soo small for the single post.

You can check shoutmeloud.com they have managed this great.

[Tom]

Yes, you need to reduce the width of the images inside the WPSP settings.

You can’t upload small images, as they will be small in single posts as well.

Serve scaled images issue is showing becuase one images showing in different sizes.

Serve scaled images means you’re taking large images, and forcing them to display much smaller (in the WPSP list).

If you use the WPSP settings to reduce the width of the images in the list, the issue will go away.

[Ravi Dixit]

Now understood, Let me try to decrese the size in WPSP and then I will let you know…
Thanks for the help…

[Ravi Dixit]

I have tried to do the same as you said me, I have found the image size which are showing on the homepage using Inspect tool and it was 262×147, when I put the exact same then images are shwoimg very small. I was not able to find the actual size of the images.

Can you tell me what should be the good size of the images?

[Tom]

I would make them about 400px wide for your 3 column layout.

[Author]

Posts