Fuzzy Images in Photo Galleries

In reference to ticket #2191393 (and the bot response that didn’t answer our question): Our WordPress site has lot of image galleries. We can look at a gallery one day and all the images look great and crisp. Another day, we come back and all the same images look fuzzy. It’s not pixelation. The images are fine. The only thing that fixes this is purging the CF cache for that page, even when we have not made any changes to that page in 6 months. We hate to keep purging the cache, because it slows down site speed for users each time. In a few months, the same thing is happening again. Again, we have not made any changes to the page or the images. We have browser cache headings set to one year. What is causing this? Since purging the CF cache fixes it immediately, we feel it is connected to having CF set up on the site. We didn’t have these issues prior to CF.

May I ask if you are on Pro Plan or higher and have “Polish” enabled?
If yes, in which mode is it? Lossy or Lossless? If it is in “Lossy” mode, pls change it to “Lossless” as it then will not alter the image quality.

If you are on a Business Plan or higher and you have “Image Resizing” enabled, it could be due to the resizing/rescaling that the image may lose a little quality and is not as sharp as before.

If both things are not the case, could you pls provide us with your website and a link to an image where you have encountered this problem?

Thanks for your response. I am on the free plan. I don’t have any image features enabled. Unfortunately, I don’t have a current example of a fuzzy image, because I was testing things to see what would fix it, so I purged the pages from the cache, which fixed it. This has happened on two type of pages. One, to the hero at the top of the home page, and also on just a few, but not all, images in a gallery page. Again, none of these images have changed in months, and were once displaying fine, and then randomly not. Here are two links: https://www.donorrecognitionproducts.com/ & Custom Donor Wall | Recognition Wall | Donor Recognition

Thats weird. If these features are not activated your images should not be altered at all.

Lets inspect that image: https://www.donorrecognitionproducts.com/wp-content/uploads/2020/07/church-donor-wall-535x334-1.jpg

Headers:

  1. accept-ranges: bytes
  2. age: 18
  3. alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
  4. cache-control: max-age=31536000
  5. cf-cache-status: HIT
  6. cf-ray: 664846d42cd04e25-FRA
  7. cf-request-id: 0ae10a989f00004e25229b2000000001
  8. content-length: 22901
  9. content-type: image/jpeg

So this is a HIT in Cache and the Image is 22.901kb big. Please Clear the cache of this particular file and request it again to see if the header shows a MISS. Then compare the “content-length”. If it is the same the image did not change, if it is different, it was altered.

Wow, thank you so much for your help. I’d have not known how to test for this. I just purged the cache for that image.

New header:

  1. accept-ranges: bytes
  2. alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
  3. cache-control: max-age=31536000
  4. cf-cache-status: MISS
  5. cf-ray: 6648605df8944e5c-FRA
  6. cf-request-id: 0ae11a8eb900004e5c9b24b000000001
  7. content-length: 22901
  8. content-type: image/jpeg

See. The Image now was served from your origin (due to the MISS) and its the very same file.

Where do I go to see the content length? I apologize for not know this.

In Chrome, press F12. Then the Developers Console will open. So open it in a new Tab, BEFORE you request your Image. Now click on the Network Tab, then on the file in the Network Tab, and then inspect the Header like this:

So what have we learned here? If the images once displayed correctly, and didn’t change, shouldn’t the cached copy continue to be served up? Why would they degrade over time. Not a little, but a LOT. Clearing local browser cache does nothing in these situations. Only clearing the CF cache fixes it.

Can you please provide us with an actual example? Please wait untill it happens again and screenshot it, and provide it here so we can see that.
Also append a screenshot of the header when it happens, please.

Another question:
Do you have any WEBP Plugin activated on your Wordpress (or your Server) installation that serves that by any internal redirect rules?

Okay, will do. Thank you. I do not have any WEBP plugins installed. Appreciate your help.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.