Really bad image quality after publishing. (Photon Site Accelerator)

Hi –

Thanks for writing to us. I’ve had a look at the screen shots and your live site.

You are correct. The site accelerator (photon) is an on/off switch. Looking at the developer tools on https://developer.wordpress.com/docs/photon/ It seems that you may be able to try this:

All images are compressed on the fly using either a combination of pngquant and OptiPNG or jpegoptim. Lossless compression is available by specifying a quality setting of 100 in the query arguments.

Thank you Liz, but I can’t understand how that would help.
Looking at the image URL I see that the configuration that was automatically selected is bad for the post images but not for the featured image.

Any ideas what to do? I have tried:
Change default image and thumbnail size
Change settings in the post area

Can’t see what more to do, unless seek for help.

post image URL: https://i0.wp.com/brasiliatoastmasters.com.br/wp-content/uploads/2019/10/MG_0024a.jpg?resize=768%2C512&ssl=1

Feature image URL: https://i2.wp.com/brasiliatoastmasters.com.br/wp-content/uploads/2019/10/MG_0052a.jpg?resize=1600%2C1067&ssl=1

Hi there,

I see the image on your post is much bigger than the size of the Photon image link you gave above, so it appears Photon is serving an image smaller than the size at which your post is displaying it, and then the image is being stretched to fit, causing the quality loss. This should not happen.

Photon looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).

https://jetpack.com/support/site-accelerator/#questions-and-answers

Are you using any custom CSS, or perhaps plugins, to make the image appear bigger than the size at which your theme displays it? If so, that would not affect the attributes of the img tag in the HTML, so Photon wouldn’t know that it actually needs to serve a bigger image.

If you’re using anything like that to modify the size at which your theme normally displays images, can you try disabling it (in case of a plugin), or removing any custom CSS you have added for this, to see if that helps?

If we can confirm this is the issue, we can see if there’s any way to fix it.

Hi Kokkieh, I believe that maybe there is some mess happening around but can’t figure this out.
The only plugins, I believe, that could change img attributes I disabled, It was ImageInject and WP SmartCrop, still the same bad quality.

As soon as I disable Site accelerator I will give me the right quality.

This page, where I disabled the right side column seems even worts =\

https://brasiliatoastmasters.com.br/clubes-toastmasters-de-brasilia-se-reunem-pela-primeira-vez/

Try turning off all of your other plugins just so we can rule that out as a conflict. Let me know if there’s any change.

Hi Liz, I tried and turned off all plugins, the only thing that made the pictures look good was disabling Site Accelerator. =\

I’m not seeing any notable content degradation under Firefox 70.0.1.

Please keep in mind that the acceleration part of the image acceleration is that we do optimize the images on our end, meaning they’re compressed just a bit beyond their original state.

There should be no notable difference to the average viewer, but if you’re comparing pixel-by-pixel, then yes you will notice a small drop in quality.

If you consider the originals to be 100% quality, our compressor is shooting for no less than 80%.

Hey James, thank you for your time and answer.
Maybe I’m seeing things different. As a photographer I understand that 80% quality wont worts so much the images.
But I believe that in my website some interpolation is happening.
Probably when saw the images site accelerator was off.

From this print screen you can see how bad it gets. I aligned the images and overlaped in photoshop to mask some ares.

You can cleary see how bad it gets. Cant read text, loose lots of details.

https://pasteboard.co/IFkE058.png

Right now site accelrator is off. Just to note again.

Any feature image displays really fine (when optimized), but all post images get really bad quality.

When I checked your site under Firefox 70.0.1, I made sure the images were loading via Site Accelerator. ??

What I saw was definitely not as bad as what you’ve highlighted.

Which browser, and version of, are you using?

I activated it again (couple minutes ago).
I’m running a brand new installed Windows 10, (means no cache, etc).
I see the same result using:

Firefox 70.0.1 (64 bits)
Microsoft EdgeHTML 18.18362 / Microsoft Edge 44.18362.387.0

The first image (big auditorium) on front page already really bad, overscalled quality.

Still dont know what else to do. =(

Here’s a comparison from my end using the original image (downloaded from your site, not our CDN), compared to the image loading on your site via our CDN.

Original on the right: https://cld.wthms.co/xRYtMC

Original on the left: https://cld.wthms.co/9ok2WZ

This is from https://brasiliatoastmasters.com.br/clubes-toastmasters-de-brasilia-se-reunem-pela-primeira-vez/ under Firefox 70.0.1, and I chose it because of the text on the book covers.

While there is a small drop in quality due to compression, I’m not seeing anything critically noticeable.

What page were you on when you got https://pasteboard.co/IFkE058.png ?

Thanks James, I just saw your answer today.
The difference you see is unbelivable. I still see really poor image quality.
Maybe its my screen size? I’m on 1920×1080 resolution.

The image you reffer (the tree) is from this page. For me still unbearable quality ??

https://brasiliatoastmasters.com.br/eventos/local-do-encontro/

Ah! I see the problem there.

So, here’s the image in our CDN: https://i1.wp.com/brasiliatoastmasters.com.br/wp-content/uploads/2019/10/Alumni-UnB-Associa%C3%A7%C3%A3o-dos-Ex-Alunos-da-Universidade-de-Brasilia.jpg

But, your theme is requesting it at this size: https://i1.wp.com/brasiliatoastmasters.com.br/wp-content/uploads/2019/10/Alumni-UnB-Associa%C3%A7%C3%A3o-dos-Ex-Alunos-da-Universidade-de-Brasilia.jpg?resize=688%2C373&ssl=1

Which is the problem since the displayed area is almost twice that size.

I see the Image Block is inserted as alignwide and am wondering if there’s any difference if you remove any alignment details.