- This topic has 15 replies, 2 voices, and was last updated 3 years, 11 months ago by
.
Hello, my featured image looks blurry on one of my Pages but seems to be high definition in the blog post. How can I fix this?
Hi @Carrebear56,
I hope you are well today and thank you for your question.
Could you please share the pages URLs from your site where it is displaying so that I can troubleshoot it?
Best regards,
Shufflehound teamI changed the picture but it still appears blurry…Here is the URL for the blurry picture
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.blog-list .post-thumbnail .sh-ratio-content { background-size: contain; background-repeat: no-repeat; }Hello I am still having blurry Featured Images. I have attached two different screenshots (one from my computer and one from my iPad Pro 11-inch). As you can see, the pictures on the Home page are blurry. Once you click into the article, the picture is not blurry. Would it help to resize the picture to be smaller on screen? Any other recommendations?
I don’t see the above-shared CSS code on your website so please make sure that you have used it and then test the issue.
I added the code and it was still having the same issue. So I removed the code. I’ll added it back in now and still having blurry images.
Please also use the below custom CSS code.
.sh-categories article .sh-ratio-content { background-size: contain; background-repeat: no-repeat; }It seems you are using Jetpack plugin on your site so could you please try temporary deactivating its Photon module on your site as shown in the attached screenshot?
The Jetpack plugin Photon module stores your website images on wp.com and serves the images directly from the server wp.com so sometimes the images are not updated on wp.com with the correct size.
Also please try regenerating thumbnails on your site using the below plugin.
I turned off the Jetpack Photon module and the images are still blurry. Do you think it has to do with the way my photos are sized or cropped? What should they be sized at ideally?
It is displaying fine for me as shown in the attached screenshot.
Please test it clearing your browser cache and using a different browser.
Yes it must have been something on my end. It looks great now.
However, I am having a similar issue with my Shop. Both images on my Shops main page are blurry.
https://www.boutiqueorbusted.com/shop/
Took a screenshot below..
Any recommendations?
Please use below custom CSS code removing the all above shared CSS code and test it after clearing your browser cache.
.sh-categories article .sh-ratio-content, .blog-list .post-thumbnail .sh-ratio-content, .products .post-thumbnail .sh-ratio-content { background-size: contain; background-repeat: no-repeat; }Hello
I deleted all previous Shared CSS Code and put in the most recent code. The images in my shop still appear blurry when viewing from a computer, iPhone or iPad. Is there a way to make the images smaller in size so it appears less blurry?
https://www.boutiqueorbusted.com/shop/
Thank You
I can see the Jetpack plugin Photon module is still active on your website so could you please disable it as requested above in my earlier reply?
Hello, I don’t see the exact screenshot that you reference but I am attaching what I did see on my end. I turned off <label class=”form-toggle__label” for=”toggle-32″><span class=”form-toggle__label-content”><span class=”jp-form-toggle-explanation”>Site Accelerator and turned off Speed Up Image Load Times. Even turning that off, it doesn’t seem to fix the issue.</span></span></label>
You can make the images smaller in size using the below CSS code.
#page-container .products .product .sh-ratio-content { background-size: contain; background-repeat: no-repeat; }
