Your third screen shot goes to a page not found error.
Are you speaking of the thumbnail on the front page, i.e. the featured image for the post at https://summeryule.com/vegan-burrito-bowl-recipe-with-citrus-smoked-tofu/?
I don’t see any blurriness for that image on my end, as you can see from my screen shot, nor do I see it on the CDN link you provided here – I can actually still see the texture of the individual blocks of tofu.
And this is what it looks like with Jetpack deactivated (i.e., issue does not appear to be Jetpack):
If the issue does not appear to be Jetpack, I’m not sure why you’re posting here, as in that case we wouldn’t be able to do anything ??
What browser are you viewing your site in, and can you send a screen shot of what you see, rather than a link to the image itself? You can use https://snipboard.io/ to share images here.
Does it make a difference if you view your site in another browser?
]]>In answer to your question, it does seem to impact the featured images most. Here’s something I recently added to my Media:
https://snipboard.io/LQzuUy.jpg
Here’s how it looks on my site (very blurry compared to original):
https://snipboard.io/zcFwqX.jpg
(as seen on https://summeryule.com/tag/vegetarian/ )
It does not seem to matter which browser I use. I use Chrome and Microsoft Edge.
]]>I see that image is being served via Jetpack’s CDN, though:
While the original image looks much better:
https://summeryule.com/wp-content/uploads/2020/08/Chop-salad-bowl-scaled.jpeg
Can you disable the CDN just so I can check if that makes any difference on my end?
When I try to download that image onto my computer, it downloads as .webp, not .jpeg, even though that’s what appears in the media file URL. Did you export that image from image editing software, or upload it directly from your camera/phone? Can you check if it helps if you use photo editing software to export that image as a JPEG, and upload and use that on your site instead of the WebP image?
]]>I switched back to the originals (not ShortPixel) for most of the images in this post https://summeryule.com/chop-salad-bowl-wildflower-bread-salad-copycat/
My site is too slow without the Jetpack site accelerator. I’d prefer to have Jetpack plus the image clarity, if possible.
]]>To both have a clear image unaffected by Jetpack while having Jetpack enabled, I would recommend excluding just this one image from the cache with a filter:
https://developer.jetpack.com/hooks/jetpack_photon_skip_image/
function my_photon_exception( $val, $src, $tag ) {
if ( $src == 'https://summeryule.com/wp-content/uploads/2020/08/Chop-salad-bowl-scaled.jpeg' ) {
return true;
}
return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );And rather than editing code, you can add it with the Code Snippets plugin:
https://jetpack.com/support/adding-code-snippets/
Hope this helps! Let me know if you have any questions. Thanks!
]]>I switched back to the originals (not ShortPixel) for most of the images in this post https://summeryule.com/chop-salad-bowl-wildflower-bread-salad-copycat/
By originals, do you mean JPEGs? I see the image at https://summeryule.com/wp-content/uploads/2020/08/vegan-chopped-salad-recipe.jpeg is a regular JPEG now, and I also don’t see any noticeable quality loss compared to the CDN version loading on your site at https://i0.wp.com/summeryule.com/wp-content/uploads/2020/08/vegan-chopped-salad-recipe.jpeg?resize=800%2C800&ssl=1
Are you using Photoshop, or something similar to process these images before uploading them to your site? I downloaded that image to my computer, and see it was created with the RGB color space. sRGB is the more common color space to use, and is recommended for online images, so you can you check if exporting your image using that color space instead make a difference?
Keep in mind you’ll need to upload it to your site using a different file name than the current image, to ensure the CDN will cache the new image.
As for ShortPixel, I wouldn’t recommend using that and our CDN, as you’re essentially compressing the image twice if you do that. If you use our CDN additional compression like this isn’t necessary, as images get served from our servers, not your site’s.
]]>I modified one of my featured images so that it should be using sRGB: https://i0.wp.com/summeryule.com/wp-content/uploads/2020/09/chop-salad-bowl2.jpg?resize=800%2C445&ssl=1 I do think it looks better. Unless there’s an easy way to fix the issue with all of my images, I’ll just have to keep this in mind moving forward. Thank you again. (And if there happens to be an easy way to fix all of the images, I would love to know!)
]]>