Set up breakpoints and responsive images for reasonable best-fit display

Problem/Motivation

Currently we are getting very unexpected behavior from our responsive images— the srcset sources defined by picture itself are entirely ignored and the (tiny) fallback image is used instead, leading to rather terrible-looking upscaling from the CSS.

We have these breakpoints defined:

octavia.all:
  label: all
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
octavia.mobile:
  label: mobile
  mediaQuery: 'all and (max-width: 768px)'
  weight: 1
  multipliers:
    - 1x
octavia.tablet:
  label: tablet
  mediaQuery: 'all and (min-width: 769px) and (max-width: 999px)'
  weight: 2
  multipliers:
    - 1x
octavia.desktop:
  label: desktop
  mediaQuery: 'all and (min-width: 1000px) and (max-width: 1191px)'
  weight: 3
  multipliers:
    - 1x
octavia.widescreen:
  label: widescreen
  mediaQuery: 'all and (min-width: 1192px) and (max-width: 1383px)'
  weight: 3
  multipliers:
    - 1x
octavia.fullhd:
  label: fullhd
  mediaQuery: 'all and (min-width: 1384px)'
  weight: 3
  multipliers:
    - 1x

It seems the 1x designation is causing smallest image to load picture element srcset.

Steps to reproduce

Look at Drutopia slide blocks on a double-density display.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes