[Resolved] Displays images with incorrect aspect ratio

Thank you, @David!

I have the following custom CSS added based on a previous discussion together.

/* CSS to force the images to be full width */
/* Applying the style on tablets and desktops */
@media (min-width:769px){
.featured-image.grid-container {
		max-width: 1168px;
}
.featured-image.grid-container img {
		width: 100%;
		max-height: 540px;
		}
}

Could you please advise what I should change?

Thank You!

Thank you @David,

Yes, removing that entire CSS code fixed the issue, but it causes another problem for my posts which still has 700X400 image size.

So, if I removed the code, the Featured image would look small for the older posts, and for those with 1280×720, the Featured Image shows as full.
I have a large number of posts with a 700×400 set for the Featured Image.

Could you please advise? Which size should I use for the Featured Image?
And if I removed the CSS code, how can I fix the older posts?

I keep the CSS code shared above at the moment.

Thank You, David!

Thank you @Fernando,

Please find below 4 screenshots before and after for a post with 1280×720 and a post with 700×400 so you can see the difference.

Post with 1280×720 + CSS Code: https://www.screencast.com/t/ZUWjyzdgZ
Post with 1280×720 without CSS Code: https://www.screencast.com/t/5eO6LvcPlAyS

Post with 700×400 + CSS Code: https://www.screencast.com/t/0fCT4S6MP
Post with 700×400 without CSS Code: https://www.screencast.com/t/ZsVdiZ4xS7W

You can find one example of an older post here: https://charbelnemnom.com/difference-microsoft-365-defender-and-sentinel/

As I mentioned above, I kept the CSS code at the moment until we find a solution.

Could you please advise?

Many Thanks!

Thank you @Fernando, much appreciated!

The issue is resolved for older posts (700×400) and for new ones (1280×720) by removing the old CSS code and adding the new one that you shared above:

@media (min-width: 769px){
    .featured-image.grid-container img {
    width: 100%;    
}
}

Here is the report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fcharbelnemnom.com%2Fmicrosoft-sentinel-vs-splunk%2F&form_factor=desktop

The issue about incorrect aspect ratio is resolved on the Google PageSpeed side.

One more question, do you think can I add a max height of 650px max-height: 650px; to the code that you shared above? the default height (720px) looks a bit large, but I believe Google PageSpeed will complain again, right?

Now after I’ve implemented your code, the incorrect aspect ratio is resolved for older/new posts, but we have another issue about “Serves images with low resolution” for older posts with 700×400.

Screeshot: https://www.screencast.com/t/D4QTYBwG

Report here: https://pagespeed.web.dev/report?url=https%3A%2F%2Fcharbelnemnom.com%2Fdifference-microsoft-365-defender-and-sentinel%2F&form_factor=desktop

I cleared the cache, so you can take a look and advise.

Many Thanks, Fernando!

Thank you, @David much appreciated your kind support!

I used your updated CSS code below, but it did NOT crop the image.
WoWo… It looks good and google is not complaining about this anymore even for older posts with 700px.

@media (min-width: 769px){
    .featured-image.grid-container img {
        width: 100%;
        max-height: 640px;
        object-fit: cover;
    }
}

I cleared the cache from my side, so you can take a look and advise.

Older post with 700×380: https://charbelnemnom.com/difference-microsoft-365-defender-and-sentinel/

Newer post with 1280×720: https://charbelnemnom.com/create-a-wordpress-site-on-app-service-in-azure/

Google Report for an older post: https://pagespeed.web.dev/report?url=https%3A%2F%2Fcharbelnemnom.com%2Fdifference-microsoft-365-defender-and-sentinel%2F&form_factor=desktop

One final question please, what is the ultimate Featured Image size that I can use for my particular case here? so that I can use it for all future featured images going forward and make Google happy. Is it 1171X700?

Thank you, @David!

Many Thanks @David, yes you are right.

I can see it in the video you shared, but like you said it’s slightly noticeable if there is a big difference between the adjusted ratio and the original aspect ratio.

For now, I will keep that CSS code and then use 1200px x 700px moving forward / updating my older posts, and eventually take out that CSS code.

Many Thanks!