Problem/Motivation
There are numerous assumptions in the responsive image code of sort ordering of image multipliers. Including the following code comment:
// Retrieve all breakpoints and multipliers and reverse order of breakpoints.
// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
// while the largest weight is expected to have the largest breakpoint
// width. For responsive images, we need largest breakpoint widths first, so
// we need to reverse the order of these breakpoints.
Steps to reproduce
Found this while working on #3192234: [PP-1] Apply width and height attributes to allow responsive image tag use loading="lazy".
Proposed resolution
Force the order of all responsive image mappings to a known (proper) order.