Limit width of `full` images to original image width

[mor10]

When an image is set to full alignment, limit the displayed with of the image to the original width. Right now the image continues to match 100vw even when the image file itself is not wide enough causing artifacts and a "blurry" look.

[joyously]

Related: #208

[kjellr]

When an image is set to full alignment, limit the displayed with of the image to the original width.

I have a couple reasons to be hesitant about making this change:

1. Gutenberg already sets some precedent by not doing this in the editor. All themes that use Gutenberg will need to think about this. If we implement a solution, we'll need to apply it to both the front and back end.
2. From a user expectations standpoint, if someone specifies that they want a "full width" image, I think they should get a full width image. In this case, full width images will stretch the full width in the editor, they'll see immediately that the image will be blurry/pixellated (unlike #208). If they're not okay with this effect, they can choose a different alignment option.

I'll cc @allancole for a final opinion, but I lean towards marking this as wontfix.

[joyously]

Does that take into account that the user could have any window size while editing? I know a lot of people that don't know to consider that what they see as they create a page could be very different for a visitor on a different device. The editor is very skinny in my usual window size, so a full width image looks fine. But when a visitor has a huge desktop monitor with fullscreen browser windows, what does he see? My opinion: the editor should show a notice that the image is xxx wide and some viewers will see a stretched version. Then the informed user can decide to continue that way or not.

[mor10]

@kjellr this is a problem with the concept of "full width" as presented by Gutenberg. Displaying an image as wider than the image will be perceived by the end-user as a broken user experience. Expected behavior is for the image to be displayed accurately. Stretching it beyond its intrinsic dimensions goes against how images should behave. In my opinion.

[mrxkon]

I'd prefer to 'accidentally' see in a bigger resolution that the image might be blurry but still full-width and replace the image with a better one or change alignment etc, than realize that suddenly on bigger resolutions it's not actually "full" breaking the whole concept.

So for me personally full-width should just stay as is and it's up to the user to decide what to do in any given case.

[allancole]

This is a pretty tricky one and while it’s not ideal for images to display with blurriness, a decision on this comes down to who is ultimately responsible for handling low quality images. Regardless of any expected behaviors presented by Gutenberg (or the theme), the source of this problem is the low-quality image itself. Any full-width scaling we do or don’t do will not correct that original image size. Whether we leave it as-is with a stretched image, or limit the image to its original width, the experience is broken because the image is simply too small for full-width. That makes this decision much more about how to inform a user that their image is too low-quality for full alignment.

Consider a post with two full width image blocks—one hi-res image, the second is a low-res image. When you first insert a smaller image in an image block, its starts at it original size. If we don’t stretch it for the full setting, how will a user know that it’s the too-small image size preventing the full width setting from working properly? When compared to the first image block, it’ll look like Gutenberg is buggy and the full setting is broken for a reason that they can’t solve on their own.

On the other hand, if we keep the stretching and the second image is blurry because of it, the author is more likely to recognize the true problem which is the image’s low quality especially compared to the first image which retains its sharpness. Since the Gutenberg setting is respected in both blocks, it will encourage a user to try another image before attributing the problem to Gutenberg which is what we want.

I’m going to going to go ahead and close this.

[mor10]

@allancole You're missing the part where someone uploads a relatively wide image - say 1200px or 1600px, and then that image is displayed on a 2450px wide screen. That's the real use case here: even with large images, people have larger monitors, and in those cases even large images may look janky.

[STHLMWebDesign]

In playing around with Gutenberg on my photography blog I also found the full-width to be slightly problematic. Pre Gutenberg I had the site set up to cap at a width of 1040 pixels which meant with retina screens using 2040px images. Looking at my site on my external monitor I think if I wanted to use full-width images it would mean adding images that are at least 4000-5000 pixels. Which seems pretty crazy to me. From a file size perspective and from a security perspective as with an image that size someone can steal it and print a wall sized print if they wanted to.

That aside the problem of the uninformed user is very hard to solve. In my experience no matter how much you try to teach a client how their site works the most of them never really learn it the way you learn it. Rather they learn the steps needed to complete a certain action. I think the best solution would be some kind of message in the editor when you turn on the full-alignment that warns the user that the image they are using might not be large enough to be displayed properly at full-width.

[LittleBigThing]

Wide seems to be be getting wider each year. Fully-aligned images are nice and trendy but they are also heavy to load, as mentioned above.

What do those new alignments in the editor stand for — wide and full?

• We seem to define .alignwide as content that is (aligned) wide, wider than the (text) content. Twenty Seventeen seems to get this right. Check.
• I am not sure if there is a definition for .alignfull by Gutenberg, but it seems to be understood as full-screen (100vw). We could also look at it as full-width relative to the page.

We could set a large max-width to the main container (page), center it and set a limit to the width of content. Depending on the max-width we set, we may still require large images to look good, but we won't be surprised as much by blurry images on wide screens because at least we have a limit. It'll result in a bit less blur for the images on large screens.

It think that adding the following would do the job:

#page {
    max-width: 1800px; /* or some other fairly large value */
    margin: 0 auto;
}

We might need more work in the editor.

The flip side of this is that we lose the flexibility we have — with columns, galleries, pull-quotes with color background, ... — to use the vertical space wide screens have to offer.