PSI improve image delivery: image file is larger than it needs to be

How To
,
1

I am working on resolving some final Google PSI issues. I’m getting the following PSI issue on both desktop & mobile. The following is the mobile stated PSI issue:

IMPROVE IMAGE DELIVERY
This image file is larger than it needs to be (768x432) for its displayed dimensions (330x185). Use responsive images to reduce the image download size.

I’ve tried a lot of different template settings for the featured image element but can’t seem to find the right way to fix this issue. I don’t have any problems in showing the displaying fine of the featured image in the different breakpoints. Here’s my scenario. All my featured images are uploaded at 1200x675 (a 16:9 ratio).
I have all the breakpoints set starting at 1366, and downward from there.
I made a Featured Image Component using a Section, Container, & Featured Image. The section uses all the defaults. The container uses a padding of 10px top & bottom. There is an “inherited” margin left & rt of about 90. Also, it’s set to centered alignment.
Any other settings are on the Featured Image element. I’ve tried different Content settings & Style settings for the Featured Image. Under the Content section, I added dynamic data of “Featured Image” & set the image size option under that to “Large (1024x1024)”. I’ve learned this will remove the PSI issue from the Desktop metrics but it remains with the mobile metrics.
I’ve left the Style section’s settings at defaults. I tried settings some fixed sizes for each device but that didn’t seem to fix anything.

So, I’m at a loss of the proper way to set the feature image sizing to resolve this PSI issue. Any guidance, including any URLs for reading, are greatly appreciated. Thanks.

2

In the WordPress media library settings you can customize the thumbnail images sizes, which you should, while retaining the aspect ratio. Then on the page where the image is displayed you can choose another thumbnail size then full in Bricks image element, serving a smaller image (thumbnail). (but with the newly defined pixel sizes)

After changing the default thumbnail sizes, you should regenerate all the images (use a plugin or so) to re-render all thumbnails to its new defined pixel sizes.

This will load the smaller image instead of the big one.

Also, consider a conversion to .WebP format instead of .jpg if you want the best Google score.

To maintain the aspect ratio, make sure they add up.
16x21=336x
9x21=189 px

so this would be the best suited size for Google’s 330x185px

3

Thanks Ferry. I had already done all those things except regeneration of images. I also discovered later that this issue is beyond just the featured image which was just one size. Regardless, I’ll review the decided final sizes and will try the regeneration idea. Thanks again.