[Resolved] Displays images with incorrect aspect ratio

[Charbel]

Hello @David and the Team,

Hope you are doing well.

How can I fix please the Displays images with incorrect aspect ratio warning by Google PageSpeed Insights?

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

You can see that under the Best Practices section. Image display dimensions should match the natural aspect ratio.

In the past, we discussed that and you told me to use 700×400 for the Feature Images as Background for posts.

I am not anymore using Background images, I am using (1280×720) for the Featured Images.
Could you please advise?

Many Thanks!
-Charbel

[David]

Hi there,

you have this CSS on your site:

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

Which is fixing the height of the image, and distorting them.
But i cannot see whre the CSS is coming from as the CSS has been optimized, it looks like custom CSS so check wherever you have added CSS

[Charbel]

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!

[David]

You can delete all of that CSS. It is not required for the changes you have made

[Charbel]

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!

[Fernando]

Hi Charbel,

For reference, can you share a link to an “older” post where this issue occurs?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Charbel]

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!

[Fernando]

I see. Thank you for clarifying.

Can you remove that code and add this instead?:

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

[Charbel]

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!

[David]

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?

If you use the object-fit: cover; property then the CSS will “crop” the image to stop it from breaking aspect-ratio:

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

BUT this may lead to other undesired effects as it will crop the image.

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.

You have a 700px wide image, and you want it to fill the width of the container which will display it at 1171px.
If you want Google to stop complaining about low resolution then replace the 700px image with a larger image.

Ultimately, the best solution here is to choose an image size that you want, and replace your existing images to match that size and then set that as a rule for all future image sizes.

[Charbel]

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!

[David]

The code is working.
It cropping is only really noticeable if there is a big difference between adjust ration abd the original aspect ratio.

Notice it trims the edge of the image ever so slightly.

Images sizes.
If you want them to be 640px in height then you could use the exact measurements ie. 1171 x 640px
But 1171px is a very awkward size, i would use: 1200px x 700px, it has the same aspect ratio, so it would give you the size you want without using the CSS>

[Charbel]

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!

[David]

You’re welcome

[Author]

Posts