Jetpack acceletaror causes image blurriness in Coblocks Logos & Badges block

[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
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

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

[jeherve]

Do you think you could copy the HTML generated by the block, when Photon is active vs. not active?

[kathrynwp]

Certainly!

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>

The problem seems to stem from this sort of thing:

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

This renders the image at 50px, which is then upsized back to 393px, resulting in the blurriness.

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>

[jeherve]

Interesting. This is most likely a duplicate of #9833.

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