Blurry Thumbnail Images in Latest Posts Section

Hey Team,

I’m getting ready to launch my website over at https://swiftlydigital.com and am almost there!

However, the blog post thumbnail images on the latest news section in the front page are distorted and lose a bunch of quality on both desktop and mobile versions of the site. Oddly enough, the blog thumbnail images look fine on the full blog posts page (swiftlydigital.com/blog) and the single post page view (How to Create an App That Your Audience Will Love - Swiftly Digital), but get distorted in the latest news section on the front page.

I have already checked this forum and saw similar threads on this topic like: https://colorlibsupport.com/t/blurry-featured-images-after-update/

I also tried the regenerate thumbnails plugin but that does nothing for me either.

My hunch is that maybe something in the following code has to be manipulated?

Or

#latest-news .section-content .post .post-image {
width: 100%;
height: 213px;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 37px;
}

But I have had no luck with my own troubleshooting efforts for a little over a week now.

Is there anything you guys can do to help?

Hello there,

I hope you are doing well today.

You can try using the regenerate thumbnail plugin to recreate the thumbnails. Here is a link to the plugin:

Also a useful post about this plugin:

Best Regards,
Support

Hey there,

Thank you so much for getting back and trying to help me out.

Like I said in my original post, I’ve already tried the regenerate thumbnails plugin & it does not solve the problem for me.

Can you look into this further and perhaps provide an alternative solution please? My site is https://swiftlydigital.com

Hey there,

Thank you for the clarification,

I would like for you to give this regenerate thumbnail a try.

Its the improved version of the one I think you may have used.
Also after doing this ensure you clear your browser cache.

Best regards,
Support.

That’s actually the same regenerate plugin I was using before. Like I said I’ve already checked other threads and tried that solution - it does not work. I even uninstalled and reinstalled the plugin just now - no result.

My hunch is that maybe one of the .php files is improperly resizing the thumbnail images in the latest news section. They show up fine on the single post and blog post page, but look terrible on my frontpage latest news section.

Any ideas other than the regenerate thumbnail plugin?

Hey,

I think i found out where is the problem. The page is loading from server images of size 250x213 and then resizing it to 350x213, hence blurry thumbnails.

Is there a way I can quickly change the size of crated thumbnails to 350x213?

Hi guys I have exactly the same problem. Thumbnails are blurry on both web and mobile. I have tried using Force Regenerate Thumbnails and Regenerate Thumbnails but to no avail. Please help and thanks so much in advance!

Hi Guys,
I am also getting this issue and am having the same thumbnail size 250×213 being displayed in the larger format causing it to become blurry. I tried the regenerate thumbnail plugin and that didn’t work. It continues to happen when adding new posts too. This is the only place the image looks out of focus.
Any answers?
Thanks
Mike

Hi guys, I’m having the same problem with blurry image thumbnails in Illdy theme.
Has anyone found a solution yet? This is driving me crazy!!
Thanks in advance, fingers crossed…

My site is www.myfurrysidekick.com, and if you scroll down the home page to the Blog preview section, you will see the blurry thumbnail I’m referring to.

This is not an ideal fix as it is just a hack really but if you look at the picture that you’re trying to display it is: http://myfurrysidekick.com/wp-content/uploads/2017/11/Moki-with-his-foxtail-toy-250x213.png
The system has resized your original image to 250x213 (as mentioned by piwowarczyk94 above). It is then displaying this image at 350x213 which is distorting the image.
The only thing I could do to remedy this was to save an image at the correct resolution over the one being used (keeping the same name: Moki-with-his-foxtail-toy-250x213.png).
Once uploaded the image will display correctly as it is the right dimensions.
This is a terrible fix as you have to do this manually each time you add a new blog post but that’s all I could do to get a crisp image.
Hopefully someone will have a better solution for us…

Thank you so much for your reply, Mikesteps!
I’ll give that a shot for the mean time, but I sure hope the folks at Colorlib come out with a proper fix soon.
Many thanks again!

Hi,

Someone found the solution for this problem?
Thanks.

Hi All,

I’m having the same issue, has anyone discovered a way to fix it?

hey there

guys this is an almost year old ticket and more than 4-5 users participated here, it’s hard for me to work in the ticket and almost impossible to troubleshoot with so many users,
My offer, please updated theme and plugin, if you have any third party plugins deactivate them and check your problem if you still have this problem please open new ticket and we will assist you,
at this moment i will close this ticket because its impossible to work here, thank you for understanding