Jetpack: Images blurred when "Image performance" is active

[nosolosw]

Steps to reproduce the issue

1. Go to create a new post with the new block editor.
2. Add a high-quality image and check that it's rendered properly, without blurring.
3. Publish the post.
4. The image will be blurred in the front-end if the "Image performance" feature is activated. It'll be ok if it's not.

I use the Twenty Nineteen theme, in case that makes any difference.

This is an example of the HTML for the image with the feature disabled:

<img data-attachment-id="11517"
    data-permalink="http://nosolosoftware.com/rams/rams_still7-2/"
    data-orig-file="http://nosolosoftware.com/files/2018/12/rams_still7-1.jpg"
    data-orig-size="1500,844"
    data-comments-opened="1"
    data-image-meta="..."
    data-image-title="rams_still7"
    data-image-description=""
    data-medium-file="http://nosolosoftware.com/files/2018/12/rams_still7-1-300x169.jpg"
    data-large-file="http://nosolosoftware.com/files/2018/12/rams_still7-1-1024x576.jpg" 
    src="http://nosolosoftware.com/files/2018/12/rams_still7-1.jpg"
    alt=""
    class="wp-image-11517 jetpack-lazy-image jetpack-lazy-image--handled" 
    srcset="http://nosolosoftware.com/files/2018/12/rams_still7-1.jpg 1500w, http://nosolosoftware.com/files/2018/12/rams_still7-1-300x169.jpg 300w, http://nosolosoftware.com/files/2018/12/rams_still7-1-768x432.jpg 768w, http://nosolosoftware.com/files/2018/12/rams_still7-1-1024x576.jpg 1024w" data-lazy-loaded="1"
    sizes="(max-width: 1500px) 100vw, 1500px">

And this is the HTML for the same image with the "Image Performance" feature enabled:

<img data-attachment-id="11517"
    data-permalink="http://nosolosoftware.com/rams/rams_still7-2/"
    data-orig-file="https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?fit=1500%2C844"
    data-orig-size="1500,844"
    data-comments-opened="1"
    data-image-meta="..."
    data-image-title="rams_still7"
    data-image-description=""
    data-medium-file="https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?fit=300%2C169"
    data-large-file="https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?fit=640%2C360"
    src="https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?w=640"
    alt=""
    class="wp-image-11517 jetpack-lazy-image jetpack-lazy-image--handled"
    data-recalc-dims="1"
    srcset="https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?w=1500 1500w, https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?resize=300%2C169 300w, https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?resize=768%2C432 768w, https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?resize=1024%2C576 1024w, https://i2.wp.com/nosolosoftware.com/files/2018/12/rams_still7-1.jpg?w=1280 1280w"
    data-lazy-loaded="1"
    sizes="(max-width: 640px) 100vw, 640px">

What I expected

Images not blurred in the front-end.

[nosolosw]

I've noticed how the max-width is wrongly picked when the "Image Performance" is enabled (it picks 640px when the image is 1500px wide).

cc @jeherve in case it rings any bell.

[jeherve]

I've noticed how the max-width is wrongly picked when the "Image Performance" is enabled (it picks 640px when the image is 1500px wide).

I believe this comes from the $content_width value of the theme: Twenty Nineteen defines 640px as it maximum content width:
https://github.com/WordPress/twentynineteen/blob/master/functions.php#L201

Yet it allows to display images in a much larger format, via the display options in the block editor.

This may all change in the future, based on the work that is being done here:
https://github.com/WordPress/gutenberg/issues/6177
We'll need to adjust Photon to account for that change when it ships.

Until then, I am not quite sure how to solve this, short of hardcoding the content width value used by Jetpack on your site, like so:

function jeherve_larger_content_width( $width ){
   return 1500;
}
add_filter( 'jetpack_content_width', 'jeherve_larger_content_width' );

Could you give that a try and let me know if it helps?

[nosolosw]

Yeah, that trick works. Pinging @jasmussen who has worked in images and themes, in case he can hint any way forward to fix this.

[jasmussen]

Yes this is a headache for sure.

Overall, there are a number of long term ways this can go:

1. We work to no longer rely on the $content_width variable at all, and find solutions that do not require this.
2. We embrace the $content_width variable and create additional variables that account for wide and fullwide images.

I personally lean towards 1, because in a world where screens are increasingly diverse, it feels very anachronistic to optimize for a specific pixel width. This approach, as noted, is increasingly obsolete when a theme supports wide images.

There are some things in the works in the block editor itself to enhance the amount of data we forward with each image block, but this is not yet present. So I'm not sure what the best approach is here. We had a "devicepx" system running on .com a while back — are there any principles from that we can leverage?

[nosolosw]

Was wondering if this has seen any progress. Note that without activating the "Settings » Performance » Speed up image load times" users can't have access to the Tiled Gallery block.

cc @jeherve @simison

[jeherve]

Was wondering if this has seen any progress.

I don't believe there has been much progress on https://github.com/WordPress/gutenberg/issues/6177 , unfortunately.

Note that without activating the "Settings » Performance » Speed up image load times" users can't have access to the Tiled Gallery block.

That's done on purpose, as the Tiled Gallery block relies on Jetpack's Image CDN.

[wouthe]

+1 here, same problem, frustrating

[pjtfernandes]

Also having this issue. Blog images are extremely blurry since enabling the CDN.
https://www.blushingbride.co.za/2013/11/08/will-you-be-my-bridesmaid/

[jeherve]

@pjtfernandes I checked that post, but it does not seem to include any images in the post content, nor any images served via Jetpack's Image CDN. The image at the top of the page is served via a different CDN:
https://cdn.shortpixel.ai/client/q_glossy,ret_img/https://www.blushingbride.co.za/wp-content/uploads/2017/07/IMG_2979-1-1.png

I would consequently recommend that you contact them directly about this.

[pjtfernandes]

Hi jeherve, I had to find a work around. I'm now stopping Jetpack from using their CDN (code below) and using Autoptimize's CDN instead. This way the gallery still works.

function jeherve_larger_content_width( $width ){ return '450'; } add_filter( 'jetpack_photon_override_image_downsize', 'jeherve_larger_content_width' );

[jeherve]

If you'd like not to use Jetpack's Image CDN, you can deactivate the feature under Jetpack > Settings > Performance in your dashboard. That may be easier than using a code snippet.

If you're ever willing to give Jetpack's Image CDN another try, and if the images remain blurry, could you copy one of the image URLs and paste it here, so we can take another look?

[HelloMinion]

Hmm I know I’ma year late but I’m running into the same issue. Would you want me to activate Jetpack’s CDN on my page so you can take a look? :)

[jeherve]

@HelloMinion Could you contact us via this form, so we can take a closer look at some examples on your site?
https://jetpack.com/contact-support/?rel=support&hpi=1

Thank you!