Limit width of alignwide and alignfull images to original image width.

[mor10]

Describe the bug
When an image is uploaded and set to alignwide or alignfull, the block stylesheet does not respect the intrinsic width of the image leading to the image potentially being displayed wider than its actual pixel size. This is unexpected behavior which can lead to images appearing blurry / crusty / having artifacts.

To Reproduce
Steps to reproduce the behavior:

1. Add relatively wide image (ie 800px)
2. Align wide or full
3. Display on wide screen and see the image appear wider than its intrinsic width

Expected behavior
The display of images aligned alignwide or alignfull should "max out" at the intrinsic width of the uploaded image.

Related tickets and PRs
See WordPress/twentynineteen#630 and WordPress/twentynineteen#638 to get a practical breakdown of the problem and a simple CSS solution.

[karmatosed]

I think it's important to think here what the experience would be like on setting something to alignwide/full and then it not doing that. There would be a disconnect, which isn't great. Whilst I understand there could also be a case of wonder why the image is out of focus, some may also intend this. I see this as something potentially frustrating people who just want it to be larger.

For me, the decider in this should be the theme. It is after all a theme that displays there and chooses what to do with the classes. That feels like a better place for this decision if people want to take it. I would love to see some testing around expectations and what the true nature is, it's so hard for us to not judge this from our own headspace.

[jasmussen]

I agree with Tammie. This is up to the themer, and indeed if we implement it in Gutenberg, it adds opportunity cost to the theme. Just like how a theme can interpret in an opinionated way what "Align Right" means — TwentyNineteen in fact does just that — so should a theme be able to interpret what full-wide means.

For example, a theme designer might want to make an 8-bit artwork friendly theme that applies image-rendering: pixelated; to images to ensure crispness of sprites. You would be able to do this:

Which when full-wide would be glorious:

The alignments are there to provide tools for themers, and not be too opinionated in the process. The true potential of Gutenberg is not in the editor we build, it's in what people build with the editor.

[mrwweb]

I'm torn on this, but I'll say that I do think there's precedent for handling this in a different way. Right now, WordPress doesn't allow you to insert an image size that is larger than the image you uploaded.

For example, if thumbnail and medium are larger than full, but full is smaller than large, then the "Image Size" select menu only shows Thumbnail, Medium, and Large.

So to follow the example, could images where full is less than the full content width simply now show alignfull/alignwide options? I'm pretty sure I'm in favor of that.

[mor10]

What I'm proposing is not for Gutenberg to force this behavior, but for the bundled block styles to have this behavior by default to set expectations. Themes are free to (and should) customize the behavior to fit whatever design preferences exist.

As for expectations, here's why I think this is necessary:

From an end-user (visitor) perspective, stretched/blurry images appear as an error and produce a negative user experience. I also doubt the regular publisher would want their images to be stretched/blurry. The expectation of most WP users is for WordPress to "do the right thing", and for all other images in the system, that is to limit the displayed width to the maximum width of the uploaded image.

From a publisher's perspective, having clear and immediate feedback about whether what they are trying to do actually works or will cause unexpected behavior is key. In this context, stretching/blurring images is unexpected behavior unless you have a fringe scenario like the one @jasmussen outlined above. By limiting the displayed width of an alignwide or alignfull image to the width of the uploaded image in the editor and on the front end (which is what WordPress already does for all other image alignments), the publisher would immediately be made aware if their chosen image is not wide enough or well suited as a full width image. This satisfies a number of heuristic evaluation criteria including visibility of system status, user control and freedom, consistency and standards, error prevention and help users recognize, diagnose, and recover from errors. I think this is kind of what @mrwweb is talking about as well.

In most cases, the width of the visiting browser viewport will be something "reasonable" and not too wide (statistics show the prevalence of browser viewports wider than 1960px is low). However, there are times when people open unusually wide browser windows. I think we can make a general assumption if a publisher uses the alignwide or alignfull options, they are working with images which are already quite wide. If so, the scenario where the image width is limited by the intrinsic width of the image will only take place in the widest browser viewports, a scenario where users already expect to see some limiting of content widths. As an example, the Theme Unit Test Data uses many 1600px wide images. These would only be limited to 1600px if the viewport was 1600px or wider which is not all that common. So with "correct" use of the features - as in only setting images suited for alignwide or alignfull to these alignment settings, the effect of this proposal is minimal. The only major impact would be when a publisher tries to wide or full align an image not suited for this purpose due to its small width.

[paaljoachim]

Hello everyone.

This issue could use a status update.
Thank you!

@tellthemachines @talldan

[tellthemachines]

By limiting the displayed width of an alignwide or alignfull image to the width of the uploaded image in the editor and on the front end (which is what WordPress already does for all other image alignments), the publisher would immediately be made aware if their chosen image is not wide enough or well suited as a full width image.

This will only work if the publisher happens to be on a reasonably wide screen. Otherwise, they'll upload an image, see that it works fine, only to later find out the layout appears broken on a wider screen than the one they were using. That is a much worse experience than publishing a slightly blurry image.

I think we should trust that authors know what they want when explicitly setting alignfull and let them decide what may be the best resolution for their images.

[talldan]

I agree about preserving the existing behaviour. It'd be really unexpected for an image to be set to full width, and then not be. Limiting the options also seems like it'd prevent what's described above where it might be ok for an image to stretch beyond its natural size.

An option that compromises and helps users could be a friendly warning in the image settings when the image's natural size isn't big enough for particular screen sizes. Something like "The uploaded image is only 600 pixels wide, and might appear blurry on wider screens".

That's just an idea. I'd leave the decision to designers, so I've added the Needs Design Feedback label. If there isn't an agreeable solution to this problem then we can probably close the issue with the "Not Implemented" label.

[kellychoffman]

If there isn't an agreeable solution to this problem then we can probably close the issue with the "Not Implemented" label.

+1. Closing this issue.