Images look blurrier on site than what I uploaded

Hi there,

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/?

https://d.pr/i/dHNxYF

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?

It’s strange that my post is here, as I thought I posted it on the “Fixing WordPress” board. Can a moderator move the posts? Should I try to repost it over there?

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.

Oh, yeah, that isn’t good.

I see that image is being served via Jetpack’s CDN, though:

https://i0.wp.com/summeryule.com/wp-content/uploads/2020/08/Chop-salad-bowl-scaled.jpeg?resize=800%2C445&ssl=1

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 turned the Jetpack site accelerator off. I have been using ShortPixel along with Jetpack because I did not realize Jetpack can serve the images as webp. There does seem to be some image deterioration due to Jetpack alone. Using ShortPixel and Jetpack at the same time seemed to be causing most of the blurriness.

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.

Hi there,

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!

Thank you, I inserted the code. I’m unsure whether it worked or not because the image looks about the same as long as I don’t have Jetpack and ShortPixel acting on the image at the same time.

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’ve been using PS Express on my phone to edit images, then I move them to my computer and resize them using the Windows Photos app. I can see that the photos I move to my computer are sRGB and the color representation information (looking at properties details) gets removed with the Photos app resizing. How frustrating! I guess I’ll be resizing in PS Express from now on. Thank you for pointing this out.

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!)