[Resolved] Featured image blurry on blog page

[Eric]

Hello, I’ve read through many support tickets, WP forums, and blog posts trying to get to the bottom of why the featured images are blurry in my specific case, and while I’ve got some clues, I haven’t been able to figure it out. It would be great to get some help.

For context, I’m redesigning my site, and I’m having a lot of trouble with changing from using an image aspect ratio of 3:2 to 5:4 on my blog and archive pages.

After much research on how to fix this common snag, I added a custom image size of 400×320, and then regenerated thumbnails for all of the featured images. Under Customizer ▸ Layout ▸ Blog I’ve set Media Attachment Size to the custom 400×320 (5:4) image size that I created, although the width and height I’ve set to 385×308 (5:4) for displaying on the front end.

With this, I was hoping that my images would be as crisp and clear as they were before, but they are not, they are blurred to a point that is not acceptable.

While I don’t know what the issue is, I’m hoping that you might have some ideas or solutions on how to solve this?

In my troubleshooting efforts, I found that if I upload a new featured image of 750×600 (5:4) which is the same aspect ratio that I am looking to display at 385×308 (5×4), then that fixes the issue and the featured image is nice and clear. But to crop and upload nearly 300 featured images would take a long time, which I’d rather not do and I don’t imagine that is the best solution at scale.

The previous featured images were all uploaded large enough at 900×600 (3:2), so I’m wondering if that has anything to do with it since it has to force crop the image to display the new and different featured image aspect ratio of 5:4?

I was hoping that adding the custom image size and regenerating thumbnails would solve my problem, but apparently that is not the case here.

Do you have any ideas on how to solve this?

I’ve included a link to my staging site for reference. The first two posts on that page are posts that I uploaded a new featured image of 750×600 and it cleared up the blurriness issue. But the other images are all blurry on my blog pages.

Hope my issues and questions makes sense to you. Let me know what you think.

Thanks in advance!

[David]

Hi there,

Cropping and rescaling a 900×600 image down to 385×308 involves losing a lot of pixels, around 75% of them. With the best will in the world they are never going to look as sharp as the original.

I would try adding a 750×600 thumbnail size and selecting that in the Blog featured image settings. WP will output the src-set sizes. And the browser will determine whether it should load the smallest image or that size ( most mobile screens are retina / HD now )

[Eric]

Hey David, thanks for the quick support. Looks like that’ll do the trick!

Thanks again!

[David]

You’re welcome

[Author]

Posts