Confused about "Properly size images"

Hi Mario,

This flag from CWV means the page is serving an image size/dimension larger than its container.

WordPress core function attempts to address this by generating a srcset for its rendered <img> tags based on registered image sizes.

But sometimes, the default srcset isn't enough so you may have to register specific image size to fit the width of your container.

Here's how to register new image sizes - https://developer.wordpress.org/reference/functions/add_image_size/

After successfully registering an image size, you need WordPress to generate an image file for that registered image size.

This plugin can do that for you - https://wordpress.org/plugins/regenerate-thumbnails/

Hi Elvin,

thanks for your answer. Actually, I don't even know what is the optimal size to choose. Maybe do I have to try first with the standard WP medium media size, that is 300 pixels, in the GeneratePress image setup? In this case, do I always need the Regenerate Thumbnail plugin?

Thanks

thanks for your answer. Actually, I don’t even know what is the optimal size to choose. Maybe do I have to try first with the standard WP medium media size, that is 300 pixels, in the GeneratePress image setup? In this case, do I always need the Regenerate Thumbnail plugin?

You won't always need regenerate thumbnail, you only need it if you register a new image size because newly registered image sizes doesn't generate new image files retroactively meaning you'll have to manually generate image sizes for the images in the media library prior to registering a new image size.

To choose, inspect your page's image container size on different viewports and check the sizes of the images in pixels(px). Say for example, on 768px viewports, the image container size is 450px wide. In this case, it may be a good idea to register an image size 450px width to cater a proper image for this container.

Hi,

where do I inspect the page image container? Using Chrome inspection, I only get the actual image of the size.

Thanks

Yes it's through Chrome inspection.

When you hover on an element like the img tag, you'll see a px size on viewport.
Example: https://share.getcloudapp.com/4gun2r0B

Still clueless.

In the private information I've attached a link to my site GTMetrix Report.

Thanks,

Mario

Hi there,

looking at the GT Metrix report - i am not sure i trust what it is reporting.
Those savings it recommends are huge - if i deduct the potential savings from the resource size - it estimates that properly optimized those images would range from 1.5kb to 10kb in size... which for images that range from 300px to 700px wide is never going to happen :)

If i test the site on Google PSI the images do not get flagged for the Properly Size Images opportunity.

Personally i would ignore what it is telling you.

Hi David,

that's what I was thinking, after reading those huge potential improvements!

I assume that no new image size needs to be created, therefore.

Having fixed this, in the sense that the root problem is not "Properly size images", I have to fix a bad score in mobile Pagespeed Insights, due to CLS. Any suggestions, here? I've posted in the private area the score.

Thanks!

No new image size required - and as you're using Shortpixel its doing all the grunt work for serving the correct sized images.

Looking at the PSI its the LCP value thats the issue.
The main problem i see is the 3rd party scripts being loaded for Adverts.
I would address that issue first - Plugins like Flying Scripts will allow you to defer the loading of those 3rd party scripts.

Once they're out the way we cant take another look at what else is going on.

Thanks for your suggestions, David. I'm currently using Autoptimize: is there a risk of conflict with Flying Scripts?

No - there should be no conflict as you will use Flying Scripts only on the 3rd party requests which Autoptimize doesn't touch.

Tried Flying Scripts, a very weird thing happened: PSI mobile score jumped from less than 40 to about 80. A few minutes later, without any change of mine, it plunged back.
I'm losing my faith...

I can see the Flying scripts code in place but it doesn't look like theres any specific script requests its being applied to.
Check with the Flying Scripts support - they're generally really responsive and can help you set it up to ensure the correct scripts are being deferred.

Well, not exactly a useful answer from their support:

Flying Scripts is to delay scripts. It doesn’t directly help in improving LCP. You’ll have to find the right keywords and configure them yourself.

Never mind, I'll look elsewhere.