Improve image srcset "sizes" attribute based on layout

[postmastersteve]

Senario 1

A ProPhoto layout uses a background gallery and the block is setup to appear full height. Since most images are landscape/wide aspect ratio, on a phone these images are sized to fill the browser height with the extra width extending far beyond the viewport width. The trouble is that the sizes attribute on the gallery images is based on the viewport width, so in many cases the photo appears scaled far above 100% size. The result is that photos look really gross on mobile phones or other narrow browsers, especially if the photos/gallery have a really wide aspect ratio. (also see issue #14 regarding automatic block height based on background)

Scenario 2

A gallery module appears in a left column with other content in a right column. Perhaps there is also a good amount of padding applied to the layout block. The gallery occupies maybe 30% of the viewport width in a situation like this. However, the images appearing in that slideshow are shown at higher resolution because of the assumption of images needing to fill the width of the viewport.

Scenario 3

The images in graphic modules as well as in tile layers are meant for a maximum size. However, images are not even downsized (see issue #545 relating to that) or loaded with srcset so when we add support for breakpoints it would be good for the image "sizes" to be calculated based upon the percentage of screen width they will occupy. E.g. a tile in a row split into 4 columns would be less than 25% of viewport so the "sizes" attribute may need to account for this.

There may be other scenarios where images appear with naive "sizes" behavior, too. Of course for nearly every scenario there is a chance that column stacking would alter the ideal "sizes" attribute for any given image, so we'll need to research how to handle this well, too. This article seemed well done: https://alistapart.com/article/responsive-images-in-practice Sounds like media conditions can be used to achieve a pretty good implementation. For example, if an image is in a column that is determined after block, row, and column padding to occupy 31vw but after wrapping on phones is 90vw because of 5% padding when in a single column, the "sizes" rule could be:

sizes="(min-width: 31vw) 31vw, 90vw"

Since the "sizes" attribute can even use calc( ) for values, we could get much more complex as necessary, but I digress. 😄

[postmastersteve]

+1 Emily Henning ticket 192918

[postmastersteve]

+1 Carola Paas ticket 194177