[Resolved] “Displays images with inappropriate size” in Google Web Dev results

[Michael]

Hello all,

In Google Web Dev I’m getting warnings about featured images being the wrong size eg:

https://www.dropbox.com/s/zc5622zkww2qw0i/featured-image-inappropriate-size.jpg?dl=0

I can’t work out where any of these sizes are coming from. I’ve uploaded the featured image as 750 x 422, and in my media settings thumbnails are set as:

https://www.dropbox.com/s/v7qp7fmn7ze65id/media-settings-image-sizes.jpg?dl=0

I thought the idea was that the media library thumbnails were used to serve the images responsively? If I inspect the element I see:

https://www.dropbox.com/s/iul5a1dc1pyyk2c/featured-image-inspect-element.jpg?dl=0

I’m not setting this vw code, so wanted to ask if the theme is doing this? And if so how I can set the images to appease Google and avoid the warning in web dev?

Please can you tell me what I’m missing or point me in the direction of a relevant article that answers the question (I haven’t been able to find any specific to this issue).

Many thanks for your help.

Michael.

[Michael]

I asked about this on the wordpress forum also and someone replied with:

Well, no the media library does not manage the responsiveness. The theme does.
However, your image is correct in rendering the 750px :
https://imgur.com/a/v3jiBUB

But the theme is rendering at 750px when in small mode :
https://imgur.com/a/MR8B3q1

[Tom]

While I’m sure a theme could set the sizes, we don’t. We simply use the_post_thumbnail(), which is a core WordPress function that outputs the featured image.

Are you wanting to adjust the values in srcset?

If so, this might help: https://wordpress.stackexchange.com/questions/287522/understanding-wordpress-image-sizes-and-responsive-images

[Michael]

Hi Tom, I got it to finally work by setting the width and height for featured image in customizer under layout \ blog and then resized my images that didn’t fit this to the correct size and reuploaded. Then when testing in web dev the warnings about size were gone.

[Michael]

Scratch that….. Worked fine on desktop, but when checked on mobile just now not as much….

[Tom]

As long as your images are optimized and sized correctly (not too big, not too small), I wouldn’t worry about it that much.

I just tested your site in Insights and Lighthouse and didn’t see the above issue.

[Michael]

Thank you Tom 🙂 I removed the featured images from showing up on individual blog posts and that helped. They only show on the blog page itself now

[Tom]

If you want to re-add them I can take another quick look at the HTML 🙂

[Michael]

Hi Tom,

Thank you very much 🙂 The issue is still visible on the blog page itself (under Best Practices result here):

https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Freclaimdesign.org%2Feco-blog%3Fao_noptimize%3D1#best-practices

[Tom]

I’m not really seeing anything wrong with that image.

You could try disabling srcset to see if it’s the cause: https://wordpress.stackexchange.com/a/211985/90661

[Michael]

Thanks for checking Tom. I don’t see anything wrong with it either – bloody Google 😉

[Tom]

No problem. Will keep this topic in mind in case I end up finding a solution 🙂

[Michael]

Thanks Tom – I appreciate it!

[frankie]

try his in your custom css :
.featured-image img {
object-fit: contain;
}

that work for me 🙂

[Author]

Posts