Can we get a test case for no width specified? I don't understand why we divide it by 2.

Technically, if you specify w for srcset - they are required for all srcset. In other words, having one absent is an error. However, these cases are seen commonly in practice and in fact all of the browsers tolerate them. Since we have no idea what width it is, the only assumption that it's smaller than the rest and we assume it's half the minimum width.

We can fix this oddness by iterating in order, right?

let prevWidth = Infinity;
for (let i = 0; i < length; i++) {
  if (sourceWidth == width) {
    return i;
  }

  if (sourceWidth < width) {
    const delta = width - sourceWidth;
    const lastDelta = (prevWidth - width) * 0.9;
    return (delta < lastDelta) ? i : i - 1;
  }
  prevWidth = sourceWidth;
}

// Return closest width
return i;

Which "oddness"?

That you have to guard against the end of the array.

Got it. Done.

With our sorting algorithm, we can't guarantee that this value isn't the undefined:

[{ width: 640 }, { width: 320 }, { width: undefined}].sort(sortByWidth);
// => [{ width: 640 }, { width: 320 }, { width: undefined}]

Actually, the undefined width doesn't move at all when sorting, so we can't guarantee it's in any position.

Actually, just realized that width: undefined and width: 0 cases are already disallowed. So, that branch is meaningless. Removed. Thanks for the catch!

Why are we multiplying the prevWidth by 0.9, and not the delta itself? That would mean we could get bad results when the prevWidth was very similar to width but we have very large widths.

The comment above explains it: we give a 10% preferences for a bigger width. This is a compromise between Chrome (that always selects the closest source) and Safari (that always selects the bigger source).

I understand the comment, but the implementation doesn't follow that:

const prevWidth = 1900;
const width = 1920;
const sourceWidth = 2000;

//...
const delta = 2000 - 1920; // => 80
const prevDelta = 1920 - 1900 * .9; // => 210

That prevDelta is drastic, even though it's the better choice. Now take:

const prevWidth = 1919;
const width = 1920;
const sourceWidth = 2000;

//...
const delta = 2000 - 1920; // => 80
const prevDelta = 1920 - 1919 * .9; // => 192.9

Even 1px difference makes us swing to the larger value every time. Instead, we could do:

const prevDelta = (width - prevWidth) * 1.1;
(1920 - 1900) * 1.1; // => 22
(1920 - 1919) * 1.1; // => 1.1

// The "turning" point
(1920 - 1847) * 1.1; // => 80.3

Now we get proper 10% penalties.

Got it. Misunderstood. Done.