Wp-calypso: Gutenberg: Image added from Media Library appears low-res

[apeatling]

via @ianstewart:

1. Clicked Edit Header
2. Added Image to header, from default images in Media Library, using Image, changed width to full, image appears to be low-res.

[Copons]

I've tried the same in the Page/Post Editor, and it happens there as well.
Switching to the code editor, I can see that the image URL has the ?w=640 query param added, and of course changing the image size from the dropdown in the block sidebar doesn't do anything.
I'm inclined to think this is caused by the same problem that causes https://github.com/Automattic/wp-calypso/issues/34969.

[mmtr]

I'd say this is the expected behavior. There are some open issues in Gutenberg requesting some enhancements on how the block alignments affect the image sizes: https://github.com/WordPress/gutenberg/issues/6131, https://github.com/WordPress/gutenberg/issues/12044

Right now Gutenberg doesn't resize the image when changing the block alignment and delegates any responsibility of changing the image size to the user with the "Image Size" setting.

Note that that selector ~was~ is not working due to #34969, ~but we fixed it today~ (we needed to revert the fix).

[Copons]

Thanks for looking into this @mmtr!
I'll keep the issue open until a fix for #34969 is merged, and we can test again to see if the UX gets any better. 👍

[gwwar]

https://github.com/Automattic/wp-calypso/issues/34969#issuecomment-525022307 looks like a fix landed. Please verify and close out if no action is needed.

[Copons]

I'm tempted to close this but at the same time I'd like a second opinion. (cc @kwight @mmtr)

Right now on WP.com I'm able to change the image size via the sidebar dropdown (which is the aforementioned fix), so in a sense the low-res issue can be easily solved by the user, by changing the image size to full width.

Though, there is an unexpected behaviour going on (possibly related to the Media Modal?).

When I insert an image, it's always inserted with the ?w=640 query param, and sized as "Large" in Gutenberg.
This is incorrect. My site's image sizes are:

• Thumbnail: 150
• Medium: 300
• Large: 1024
• Full: nd

There is no size set at 640 that I know of.
This is easily verifiable by observing the query param appended to the image URL while changing the image's size via the Gutenberg dropdown.

The fact that the image is inserted at 640 and defined as Large means that, to set it as "Large proper" (1024), one would need to change the size in the dropdown to anything else, and then back to Large.

So then again, this issue in fact... is not really solved.
The image is inserted at 640 instead of 1024, and stretching a 640 image full width would look low-res beyond any reasonable doubts, much more than stretching a 1024 image anyway.

I haven't located where the ?w=640 is set, but I'd argue that, since Gutenberg defaults the size to Large, we should have a way to insert them at ?w=1024 instead.

[mmtr]

My site's image sizes are:

Thumbnail: 150
Medium: 300
Large: 1024
Full: nd

Can you clarify where these sizes are defined? Is something a user can set on a per site basis?

[mmtr]

Thanks for that research @Copons. Definitely there is something wrong. If there is some kind of conflict between the expected sizes and the actual ones, it might be caused by the same issue I noted in https://github.com/Automattic/wp-calypso/issues/35822#issuecomment-525597731 we're currently investigating.

Let's leave this issue open until we finish the investigation there.

[Copons]

My site's image sizes are:
Thumbnail: 150
Medium: 300
Large: 1024
Full: nd

Can you clarify where these sizes are defined? Is something a user can set on a per site basis?

They are on a per-site basis, and can be set in wp-admin Settings > Media (wp-admin/options-media.php).
My sizes are the WP default.

[noahtallen]

This is not an FSE-related issue, so I'll edit and punt from the sprint to reflect that.

[noahtallen]

On second thought, I'm going to close this. Uploading a high res picture and changing gutenberg to show full resolution does seem to show the full resolution of the picture in editor and on front end.

I think if not respecting the user's settings for image loading is an issue, that should be created separately and is likely not a WordPress.com bug