Responsive images custom metrics

[eeeps]

Progress on https://github.com/HTTPArchive/almanac.httparchive.org/issues/2144

This is not quite ready to be merged...

It all works, but I need to:

• think about keys on the image entries in order to join them with other sources of info on these Elements. @rviscomi if you have any ideas here I am all ears.
• make sure I get or can get the bits/pixel, by getting the loaded resource bytesize and attatching it to this and the approximate dimensions.

Then there are some nice-to-haves... but that's the must do list.

PR'ing to get some more eyes on what's here now and comments in a place other than twitter.

My "test suite" such as it is is: https://codepen.io/eeeps/debug/Exmxwzq Here's a successful WPT run against that: https://webpagetest.org/custom_metrics.php?test=210629_AiDc5N_8d945980cad843b7ed362df6d53ef17e&run=1&cached=0

[eeeps]

@rviscomi thank you so very, very much.

Since you reviewed...

• Addressed all review comments from @zcorpan (here and on Twitter) and @nhoizey
• Added the current loaded resource URL as a key to join to things
• Added a few significant new metrics (!) in af3fbef and ab392ee. Which: I'm sorry. But bits/pixel in particular was something I was very excited to add to the analysis this year (and needed all of this density-awareness in order to calculate).
• Manually tested everything on a handful of actual pages.

I'll see if I can get another full review by EOD.

[zcorpan]

The resource selection logic LGTM.

[eeeps]

Added a few more values to the reported JSON -- all stuff we were either already looking at in order to calculate other things, or the values of attributes we were previously only testing for the presense of.

There is some duplication with what's captured in images.js, but I think having those things here will make analysis that would have required a join less error-prone.

---

@rviscomi asked for some WPT results; here they are:

• harvard.edu (contains a few srcsets with w descriptors)
• nytimes.com (picture elements with art direction)
• netflix.com (hero does srcset with w descriptors)
• shutterstock.com (picture elements doing art direction and type switching, in conjunction with srcsets that use x descriptors)
• mailchimp.com (shows interaction with lazyloading, which... maybe I should report explicitly on that (or whether the img generated a request), too, so we don't just have to infer from zero dimensions)
• cnn.com (shows interaction with complex javascript-driven responsive loading and 1x1 trackers, which is all fine/as I expect)

[rviscomi]

This looks great, thanks for the test cases. I'm comfortable merging this as-is in the interest of time. If there's any follow-up feedback or bug fixes we could open another PR.