Suboptimal image sizes in sections

[kmeleta]

Describe the current behavior

Several sections are loading inappropriate image sizes (too high quality or too low quality) at certain breakpoints and configurations. These were noticed while testing #1906

Multicolumn - Desktop images load sizes appropriate for only a single visible column. In a > 2 column configuration, the images loaded are far larger than needed.

Collage - image block loading an image that's much larger than needed for the layout

Image banner, collapsible content - Mobile image not large enough, can appear blurry

Describe the expected behavior

Sections should ensure appropriate image sources are loaded according to the the section layout, viewport, and pixel density of the device.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 1.0.0
• Chrome Version 91.0.4472.114
• macOS Version 11.3.1

Possible solution

The logic in the sizes attribute should be tweaked to better support these conditions

Additional context/screenshots

These are just specific instances I noticed while testing certain sections, there are likely more.

[stufreen]

Partly covered by

• Improper image sizes rendering in Multicolumn sections.  #2298
• Fix improper image sizes in the collage section #2478

[eugenekasimov]

@kmeleta I didn't notice any wrong sizes of images in the Image banner section 🤔.

Please, let me know if I miss something and you still see an issue there.

[kmeleta]

@eugenekasimov I tried a few image configurations and didn't notice any issues so some tweaks may have been added at some point. If you can't find any stand out issues either we can consider that one complete.