Sorry for too many questions from me recently, but this is a kind of weird issue that I’m not able to fix for a some time…
I tried to disable all plugins if it would change that, but didn’t work… isn’t there some magic CSS for this also?
Hello Viliam,
Thanks for posting in!
I have checked your posts and I do not see any blurred images. I am seeing this:
Can you send us the url of the page or post where the blurry images were seen? Or perhaps send us a screenshot instead.
Regards.
it’s blurred when I compare to the original… without sharpness… that’s the right word
this one
So it’s not the featured image in this case as you can see below in the post… but in the most of theposts all my feat. pictures are broken…
Wwhat I should check to make sure that it’s not caused by theme?
Hi Viliam,
I have check and notice that the original image is not really sharp at all:
It might happen if the original image is too small and it was stretch on display. But this is not the case for you.
… Could this be caused by the Imagify plugin? I used the “Ultra” option for optimizing images, now I see that it probably broke all my pictures and make them look terrible
Also, I noticed some issue and that is when I make the picture smaller than the original is, then it’s not so sharp and looks less quality… what would cause that? It should be even sharper but its just worse
Hello Viliam,
The best way to test it is to disable any of the image optimization plugin that you install and compare the results of your images.
When you upload an image, it is recommended that it is at least 1200x800. Smaller image dimension may give you blurry result when set as featured images because it will be stretched out.
Hope this helps.
Hey again, I sending you the same picture that was uploaded on WP (when all plugins were disabled)
and second, sharp picture uploaded to imgur…
When you compare them, you will see that first one is very clear and sharp meanwhile second is not at all. My question is what the heck I have to do to finally make it work?? Its so annoying, I believe its in the X theme… just dont know what exactly to do with that
- Sharp/Clean one
- After I uploaded it to WP
Hi Viliam,
It looks like you have the same issue as here, please go through to that thread and follow Rad’s suggestions.
Let us know how it goes,
Cheers!
that would make a difference … thanks for hint ))
You’re always welcome Viliam!
Cheers.
I tried all of these solutions but without any change, it but I want to ask if you would login to my site and check what problem is there? That really hurt my site with unquality media, let me know if you would do that so I can provide you secret note, that would help me a lot
I mean this topic… https://theme.co/apex/forum/t/bad-image-quality-on-portfolio-projects/64200
Hello Viliam,
In this thread: https://theme.co/apex/forum/t/bad-image-quality-on-portfolio-projects/64200/14, please combine the two codes given by Rad and then clear all your caches and test your site again.
add_filter( 'wp_calculate_image_srcset', '__return_false' );
function x_featured_image( $cropped = '' ) {
$stack = x_get_stack();
$fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;
if ( has_post_thumbnail() ) {
if ( $cropped == 'cropped' ) {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
}
} else {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
}
}
switch ( is_singular() ) {
case true:
printf( '<div class="entry-thumb">%s</div>', $thumb );
break;
case false:
printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
esc_url( get_permalink() ),
esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
$thumb
);
break;
}
}
}
Add this code in your child theme’s functions.php file, clear your cache, temporarily disable any lazy loading feature and test your site again.
finally… it fixed same as featured images also as the content images, good work, thanks for that<3
You’re always welcome Viliam!
Glad this is now sorted out. Cheers.
Unfortunatelly I still getting these blurry images… could you look into my site to check what would cause that?
picture is without any sharpness when you compare to the other text. I said that it worked but only on one picture that I applied for a featured image…
I also noticed some interesting thing that when I visit the uploaded picture on my site and enlarge it, it looks amazing ( Just click on that and zoom in)
BUT when I put the picture in the content, and make it EVEN smaller, it start doing ****. However, I tried to disable all plugins, tried regenerate thumbnails, optimize pictures, but also tried to upload pictures without any optimizing to ensure that it didn’t lose the quality… nothing worked
And another thing I’ve noticed is that when I use the function “Clear Formatting” it make it normal? And it’s not blurry anymore… for now at least
Hello Viliam,
When the srcsets are enabled, your images will not display the full image. To better assist you with your issue, kindly provide us access to your site so that we can check your settings and investigate your site. There might be other factors like a plugin or other custom code that is doing this issue. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Cheers.
already done!
Hey Viliam,
Upon checking, I see that you have removed the code in your child theme’s functions.php. I only see this.
Please insert the code provided again and upload 4k resolution images. The blurriness that you see is the browser’s image rendering when scaling an image down. With the srcset enabled, the blurriness is a bit noticeable because the browser displays the optimal size for the container width and not the full image size. With the code provided, the srcset is disabled and the Full Image size is used for the Featured Image.
This blurry image display is not an issue with our theme. I tested your image on my site and it’s really blurry when inserted in the content area because the content area is not that wide. I tested the TwentyNineteen theme and the quality improved because its content area is wider. Try temporarily switching to Fulldwidth Content Layout in Theme Options > Layout and Design to see if the quality of the image improves. You need to display the image as big as possible. This is why you see a sharp image when you viewed your image in the browser and zoomed in.
Please check the test page I’ve created and compare the image added through Add Media with the image added using X Image Shortcode (see secure note). You’ll see that the X Image shortcode is a bit sharper because it doesn’t use srcset. But, the browser will still downscale the image so it will be blurry.
-----------------------------------------------------------------------------------
If you have important information in your image, my personal recommendation is, link the image URL to the image so your website users can view the full image.
Thanks.
OK maybe I take it back!
Here is my post I’ve made where I uploaded very quality and crisp pictures… and after I checked it after switching to “fullwidth” looks pretty good when it’s enlarged
WITH THAT SAID, The main problem and question is - How to keep the picture crisp and sharp when I Zoom Out and make the picture even smaller? Why the picture lose the quality and is blurry after that ? It should be even more clear and not blurry…