Wp-calypso: Jetpack acceletaror causes image blurriness in Coblocks Logos & Badges block on Atomic & self-hosted sites

[kathrynwp]

Steps to reproduce the issue

1) Go to a self-hosted site, or a site hosted on WordPress.com running a third-party plugin or theme (Atomic)
2) Make sure the Jetpack site accelerator (aka CDN/Photon) is active:

3) Activate the Coblocks plugin - note that this is already installed on newer WordPress.com sites running a third-party plugin or theme
4) In a new or existing post or page, insert a Logos & Badges block
5) Upload images to the block - sample images can be downloaded from the test post: https://kathrynwp.wordpress.com/5422-2/
6) View the page or post on the front end

What I expected

Image should be sharp

What happened instead

Images are blurry

7) Now turn off the Jetpack accelerator
8) View the page or post on the front end

What happened

Images are sharp, which is the correct way they should look

Comparing the HTML output

Photon active (images blurry)

<div class="wp-block-coblocks-logos"><div class="wp-block-coblocks-logos__row"><div style="width:50%"><img src="https://i2.wp.com/zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-logo-metade-2.png?w=50%25" alt="" data-id="84" data-width="50%" data-recalc-dims="1"/></div><div style="width:50%"><img src="https://i2.wp.com/zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-circle-05-512x514.png?w=50%25" alt="" data-id="86" data-width="50%" data-recalc-dims="1"/></div></div></div>

Photon not active (images sharp)

<div class="wp-block-coblocks-logos"><div class="wp-block-coblocks-logos__row"><div style="width:50%"><img src="http://zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-logo-metade-2.png" alt="" data-id="84" data-width="50%"/></div><div style="width:50%"><img src="http://zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-circle-05-512x514.png" alt="" data-id="86" data-width="50%"/></div></div></div>

Both the Atomic site and the Jetpack site with Photon ON result in these sorts of image paths:

https://i2.wp.com/zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-logo-metade-2.png?w=50%25

It seems to be the 50% part of the query string that causes the images to be output at 50px, instead of 50% wide. That 50px image is then blown up larger, which results in the unwanted blurriness.

WordPress.com Simple sites do not have the issue, nor do Atomic or Jetpack sites with Photon off.

Context / Source

Reported by WordPress.com user, refs 2456734-zen 16300834-hc

user-report

Originally reported here:
https://github.com/Automattic/jetpack/issues/13882

Related:
https://github.com/Automattic/jetpack/issues/9833

Posting here, as discussed with @kwight, to see if anything can be done from this end.

[gwwar]

cc @jeherve do you know who's more familiar with photon who'd be able to help investigate?

[gwwar]

Oh missed the comments on the duplicate

From @jeherve

I wonder if it may be worth bringing this up to the Coblocks folks, to see if there is a way they could use pixel values at all times instead of percentages in their blocks:
https://github.com/godaddy/coblocks/blob/master/src/blocks/logos/logos.js

Blocks using percentage widths images seems like a commonish case.

https://i2.wp.com/zoonini.wpengine.com/wp-content/uploads/2019/10/cropped-circle-05-512x514.png?w=50%25

The query param here for w=50%25 feels malformed and should not be parsed as 50px. At the very least render an image with that value dropped.

[mmtr]

I think the w=50%25 param shouldn't be present at all in the URL. I don't know where Photo is getting that from, but the image doesn't have any width set. This is (part of) the output of the block (and saved to the post content)

<div style="width:50%"><img src="https://:site/wp-content/uploads/2019/10/cropped-logo-metade.png" alt="" data-id="414" data-width="50%"/></div>

The data-width attribute doesn't modify the width of the image, and it is used as the source of the width attribute (that is applied to the parent div). Maybe Photon is using that data attribute incorrectly?

[mmtr]

Maybe Photon is using that data attribute incorrectly?

Yeah, this line seems to be the root cause: https://github.com/Automattic/jetpack/blob/ea23e95497c4ee35ab3c57acc468e82e46caa74b/class.photon.php#L339

@jeherve Do you know if the code above intentionally uses any *width attribute (such as data-width attributes) or if is it an oversight?

[jeherve]

I can't really tell, unfortunately. It seems it's been that way since we first introduced Photon 7 years ago:
https://github.com/Automattic/jetpack/commit/a424c3f3a02a09083ec2f0f94debe8c1f61b43ae#diff-57192844dbc7d2964be2d533f997f27dR85

I think it'd be fair to update this so it only takes the width attribute into account, and not data-width, but I may be missing a special use-case here.

[gwwar]

Yeah, I'd be surprised if we intentionally were targeting data- in addition to width. This might still break things unintentionally, but would be worth a try PR.

[mmtr]

Opened https://github.com/Automattic/jetpack/pull/13961 making sure Photo only targets width/height attributes.

[jeherve]

Fixed in https://github.com/Automattic/jetpack/pull/13961