Archived topic
“Displays images with inappropriate size” in Google Web Dev results
13 replies · Started by Michael on June 13, 2020
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.
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
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
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.
Scratch that….. Worked fine on desktop, but when checked on mobile just now not as much….
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.
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
If you want to re-add them I can take another quick look at the HTML :)
Hi Tom,
Thank you very much :) The issue is still visible on the blog page itself (under Best Practices result here):
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
Thanks for checking Tom. I don't see anything wrong with it either - bloody Google ;)
No problem. Will keep this topic in mind in case I end up finding a solution :)
Thanks Tom - I appreciate it!
try his in your custom css :
.featured-image img {
object-fit: contain;
}
that work for me :)
