gistfile1.html

<!-- we currently have srcset... -->
<img src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
<style>
  /* We also have image-set */
  .whatever {
    background-image: image-set(
      "foo.png" 1x,
      "foo-2x.png" 2x,
      "foo-print.png" 600dpi
    );
  }
</style>
<!--
  Of course, the two are incompatible. srcset doesn't support dpi, and 
  image-set doesn't support w & h units.

  Idea: ditch srcset, defer image selection to CSS:
-->
<img content="image-set('banner-HD.jpeg' 2x, 'banner-phone.jpeg' 100w, 'banner-phone-HD.jpeg' 100w 2x)">
<!--
  Asumming we get w & h support into CSS. This allows for other CSS functions to select imagery:
-->
<img content="image('whatever.webbp' format('webp'), 'whatever.jpg')">