Photons messes up image quality

Thanks for the feedback!

By default, Jetpack’s Photon module will indeed optimize all your images. It won’t, however, alter the quality of those images, unless you customize Photon to do so.

That said, something wrong obviously happened with that PNG image of yours, and we’d need to find out why. It could be using a specific color profile that Photon doesn’t handle well; it could use specific meta data that Photon didn’t consider when optimizing the image; the image might be optimized properly, but Photon may not be adding the right image parameters when displaying the image within your theme.

If you’re willing to look into this with me, would you mind turning Photon on again, copy the blurry image URL from Photon, turn Photon off, and then paste the image URL here so I can take a closer look?

If you want your site URL to remain private, you can also contact us via this contact form:
https://jetpack.com/contact-support/

Thanks!

I’m curious as to how you optimize an image without reducing the quality, and I haven’t customized my installations of Photon.

I’m curious as to how you optimize an image without reducing the quality

There are several ways to approach this, but with Photon, we use different image compression algorithms (pngquant, OptiPNG, jpegoptim) that offer both lossy and lossless image compression. It allows Photon to create images smaller in size, without losing the original image’s quality. If you’re interested in learning more about how these tools work, I’d suggest looking at the links above, and at Photon’s code. I’m afraid I can’t tell you more about the mathematical and technical ways to compress data, because I don’t know much more than this myself!

That said, I would still be interested in seeing the image you’ve had trouble with; if there is a way we can improve our tools, and address issues with specific images, my colleagues working on Photon will be happy to take care of that!

Thanks!

I notice a fair loss in quality as well. Is it supposed to maintain 100% of the quality? If not is there a way of setting it to 100% in the code of something? I see no option to edit it. Where do I put the code in the link that you pasted? I’m quite technical but not an expert.

Thanks

I notice a fair loss in quality as well. Is it supposed to maintain 100% of the quality?

Photon maintains 89% of the original image quality; we’ve opted for that default setting as it applies a compression that is not visible. Bringing the quality downer starts making visible changes to the images’ quality.

If you do notice a loss in quality with that default setting on your site, could you give me some examples so I can take a closer look? It could be that your images use a custom color profile or specific EXIF information that Photon doesn’t support very well yet, but if we know more we’ll be able to fix things.

If not is there a way of setting it to 100% in the code of something?

Yes, you can use a code snippet like the one in this post:
https://developer.wordpress.com/2015/02/04/lossy-image-compression-with-photon/

You’ll want to replace 80 by 100 in the code above, and you can remove $args['strip'] = 'all'; to keep EXIF information alongside the images.

Here is the end result:

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 100;
    return $args;
}

You can paste in your theme’s functions.php file, or in a functionality plugin like this one.

Sorry to revive an oldish thread, but I couldn’t find anywhere else to ask.

Now, I wanted to do what this thread explains, but it seems this only changes the quality of the images displayed in the content.

This is fine but I have a problem that goes 1 step further. On my site, I have jetpack carousel running. On the image that is in the lightbox, the quality tag doesn’t work.

If I manually add &quality=100 to the image source it works.

I currently cannot find a way to fix this without modifying the jetpack plugin code.

The code I need to change is in jetpack-carousel.js line 1031. I can then add the &quality= part to the img src.

Does anyone know of a way to add this either via changing the URL on the fly, dynamically adding the &quality= to the URL or by overriding the whole js file with a modified copy in the theme folder. I would like to do this hopefully via my functions.php file or a separate plugin if I really have to.

@eangulus Carousel is indeed a bit more complicated to handle, as it’s all created via JavaScript, as you realized.

To customize the JavaScript output, you would consequently have to add the additional quality parameter by enqueuing your own JavaScript file after jetpack-carousel.js, and change the image URLs inside each carousel slide. This should help you get started:
https://stackoverflow.com/a/22304706/1045686

I hope this helps.