Photon increasing file size of JPEG images with high compression

Thanks for the report! I’m not exactly sure why this is happening, so I’ve asked our Photon expert to take a look. I’ll get back to you as soon as I have some news!

Thanks for your reply, Jeremy. I hope you can help me with that soon.

TL;DR; Upload at good quality and tweak for visual acceptability using Photon’s quality and strip parameters.

So, the first thing to clear up is the concept of quality. There is no hard definition of quality in the JPEG standard and it is handled differently by specific implementations in software packages, using different chroma subsampling, block boundaries, etc. What this means is that there is no explicit way of dealing with quality = X between software platforms. Therefore using another application to set the quality to X does not mean when the image is processed by another application it would be exactly the same visually or in file size. In fact you often get compression “on top of” compression, which is obviously undesirable as it can lead to blocky images.

The way Photon is intended to be used, is for you to have the source image uploaded at a high quality setting and then have Photon perform the compression you prefer (or are willing to accept) via the quality and optional strip parameters. This avoids the scenario of having compression performed on an already heavily compressed image.

When looking at the images in question. The first image looks quite different from a colour perspective and looking deeper confirms this. The quality of 30 in XnView is using a different chroma subsampling method when compared to GraphicsMagick, which is Photon’s backend image processing platform (2×1,1×1,1×1 vs 2×2,1×1,1×1). This is causing the artifacts in the image. In truth a quality setting of 30 in Photon is more often that not far too low.

The second image is actually being detected at a quality of 60. From a visual perspective both images have their pro’s and con’s. I my opinion the text is better in the Photon image, whereas the colour gradients are handled better in the Photoshop image. I guess it’s subjective, but in all honesty any image that contains text needs to be at a higher quality setting in order for it not to have artifacts at the text edges. The source image should be uploaded at a high quality and then Photon should be used to tweak, via the quality and optional strip parameters, until an acceptable visual quality level is attained.

Apologies, before I switch context and neglect your second question, here is the answer ??

Is it possible to disable the Photon “reprocessing” of the original images?

Currently there is no way to switch off this feature.

Thanks for your reply, David.

I am aware of the concept of “quality” in JPEG, I am sorry if I gave you the wrong impression about it. I now realise that my writing and my examples might confuse some readers, so, just to be clear, I want to state this: I wasn’t saying that Photon’s compression is bad or something. That’s not what I meant.

With my two examples, I did not mean to compare the quality of compression algorithms by XnView, Photoshop or Photon. I just wanted to show what Photon is doing to heavily compressed images that I upload: increasing their size while decreasing their quality.

I didn’t know Photon is intended to be used with a source image with a high quality setting, I think that could be made clearer for the user.

You say:

The source image should be uploaded at a high quality and then Photon should be used to tweak, via the quality and optional strip parameters, until an acceptable visual quality level is attained.

I ask: is it possible to do that for each upload? Since each image needs a different treatment, ideally the user would have the option to tweak it easily and individually. Or, better yet, the option to disable the “reprocessing”, allowing him to make the necessary tweaks before the upload. It’s very sad to know that it’s impossible.

By the way, these articles gave me impression (and hope) that it would be possible to disable the reprocessing:

https://developer.wordpress.com/docs/photon/api/

For JPEGs a setting of 100 will output the image at the original unaltered image quality.

https://developer.wordpress.com/docs/photon/

Lossless compression is available by specifying a quality setting of 100 in the query arguments.

That is why I tried to use that filter with quality 100. I though “output the image at the original unaltered image quality” and “lossless compression” meant exactly that. Therefore I ask you a second question: am I misreading something here? Why is quality 100 still compressing/reprocessing my images?

Thanks in advance.

I would like to add some points, just for further clarification. Here are my examples again:

Image #1 (quality 30 with XnView)
Original (71.16 KB): https://goo.gl/8ah2E8
Photon (72.24 KB): https://goo.gl/ObNkdb

Image #2 (quality 10 with Photoshop)
Original (230.38 KB): https://goo.gl/Tj9cKQ
Photon (282.38 KB): https://goo.gl/tI5Xaq

The labels I’ve used might have caused some confusion. So let me clarify them.

“Original” there means the image that was saved with the aforementioned settings (quality 10/30, XnView/Photoshop) and uploaded to Media Library. “Photon” means the same image, saved with the same settings and uploaded to the same Media Library, that was reprocessed by Photon and hosted at ix.wp.com.

What I did not do: picked one image (source), saved with XnView, called it “Original”. Picked the same image (source), used Photon, called it “Photon”. Compared both.

What I did do: picked one image (source), saved with XnView, called it “Original”. Picked the image saved with XnView (“Original”), used with Photon, called it “Photon”.

So, on Image #1, it’s not XnView (“Original”) vs. Photon (“Photon”). It is XnView (“Original”) vs. XnView + Photon (“Photon”).

Image #2 is not Photoshop vs. Photon. It is Photoshop vs. Photoshop + Photon.

Again, I didn’t mean to compare the compression algorithms of XnView and Photoshop to Photon’s. I just wanted to show what Photon’s compression does to a highly compressed image.

The change in colours of Image #1 is especially bad because Photon is doing something it shouldn’t do. The “Original” image has the same colours of the source image.

Yes, I understood what steps you had taken, which is why I mentioned the compression “on top of” compression issue. As suggested in the previous post, it is best practice to supply Photon with a high quality source image and not one that has already been compressed with a low quality setting by another software package.

For image 1, a quality setting of 30 is far too low for normal use and Photon (GraphicsMagick) is dropping some of the chroma subsampling (colour information) at this quality level. There is currently no plan to replace GraphicsMagick as the main backend image processing library for Photon and unfortunately this is the procedure it follows internally.

(big edit; ignore this and see post below)

David, I forgot to say the Photon images in my examples are results of Photon’s default settings (quality=90), if that makes any difference.

On Image #1, Photon changes the colours even if I save the file with high quality. See the examples below:

Original (XnView 70): https://goo.gl/QeolJQ
Photon (XnView 70 + Photon 90): https://goo.gl/Lz9077

So it seems the colour change is not related to the compression level of the file.

EDIT: I added two more examples, this time with quality 80 and 2×2, 1×1, 1×1 subsampling. And guess what… Photon still changes the colours!

Original (XnView 80): https://goo.gl/rGS7lq
Photon (XnView 80 + Photon 90): https://goo.gl/IQEp1p

—

Anyway, I know my posts were long, so I am repeating the two questions I made before here:

1. Is it possible to tweak quality and strip parameters for each upload?

2. Why is quality 100 (on Photon) still compressing/reprocessing my images? Am I misreading something here?

https://developer.wordpress.com/docs/photon/api/

For JPEGs a setting of 100 will output the image at the original unaltered image quality.

https://developer.wordpress.com/docs/photon/

Lossless compression is available by specifying a quality setting of 100 in the query arguments.

—

Just to explain, I like to try using low quality settings on high-resolution JPEG images to see how they look on high-DPI screens. Sometimes a “retina” JPEG image with low quality settings looks better than a low-resolution JPEG image with high quality settings:

https://www.filamentgroup.com/lab/compressive-images.html
https://www.karelia.com/retina/

Right, after even deeper investigation…the issue is related to viewing the images in a browser that supports the WEBP image format, mostly likely suspect is Chrome (ref: https://developer.wordpress.com/2015/06/25/photon-webp-image-support/ ).

If you open the same Photon URLs in Firefox / Safari / IE you should not see the colour or quality issues. The way WEBP treats quality is inherently different to JPEG and how it deals with grayscale is also different. We will take a critical look at these issues you have highlighted and tweak our WEBP implementation accordingly. Thanks for sticking to your guns and uncovering these, it’s very helpful indeed.

Great, nice findings. You’re right, I saw all those issues with Chrome. They are also present in Opera, which is Chromium-based. All the images look way better in Firefox, Safari and IE.

After making some additional tests using Firefox, I have this to say:

1. As you said, I do have to use high-quality JPEG images with Photon. When I use a low-quality JPEG image, Photon still distorts the colours a little bit (even when the original image has 2×2, 1×1, 1×1 subsampling and is viewed in Firefox). When I use a high-quality JPEG image, the colour distortion (if there is any) is not easily noticeable.

2. I am sorry for insisting on this point, but that “requirement” (using high-quality JPEG images) apparently only exists because Photon does make changes on files even when quality is set to 100. I mean, if quality=100 worked the way I want, I could use low-quality JPEG images with no problems. Photon changes both low and high-quality JPEG images. Am I doing something wrong here, or am I misreading the links I posted in my previous posts, or are the sentences I quoted wrong?

Thanks again!

I’m investigating several issues having just turned photon on and I am finding this to be a very interesting and useful discussion. Thanks both for sharing.

We have ensured that JPEGs honour the quality=100 request for WEBP output, in line with how PNGs have been doing so. When you retest your images, in browsers that support the format, I am sure you will clearly see the difference.

However, with regards to completely turning off processing of source images, it is not possible as we pass all images through our image validation and processing pipelines to ensure the service is not abused in any way.

Great. I did some quick tests here and, apparently, now both Chrome and Firefox show the images with a very similar look (as I described above on note #1 – low-quality JPEG images with some colour distortion; high-quality JPEG images with almost no distortion).

I understand and sympathise with your explanation regarding the image processing, but it would be great for users to have more control over it. I am not sure about it (and I am sorry if I am being nonsense here), but at least in my case I think turning off the image processing could mean less stress on Jetpack or WordPress (i.e., less use of its resources).

Anyway, I know it won’t happen (at least soon), but I still hope to see that option one day.

—

As I said above, I may be misreading something, but I think the Photon documentation needs some editing to be more accurate. These sentences don’t look right for me.

https://developer.wordpress.com/docs/photon/api/

For JPEGs a setting of 100 will output the image at the original unaltered image quality.

https://developer.wordpress.com/docs/photon/

Lossless compression is available by specifying a quality setting of 100 in the query arguments.

I’d suggest changing the first sentence to something like: “For JPEGs a setting of 100 will output the image with the best possible quality, but the image will be processed using a lossy compression.” The second would be better like this: “Lossless compression is available only for PNG by specifying a quality setting of 100 in the query arguments. JPEG lossless compression is not available.”

Thanks again for your support and attention.

Come on, guys… Don’t you agree those sentences needs to be changed?