responsive-images.html

<picture size-hint="100% 550px">
  <source src="/images/hero~640x550@1x.jpg"  width="640"  height="550"  resolution="1x"/>
  <source src="/images/hero~640x550@2x.jpg"  width="1280" height="1100" resolution="2x"/>
  <source src="/images/hero~768x550@1x.jpg"  width="768"  height="550"  resolution="1x"/>
  <source src="/images/hero~768x550@2x.jpg"  width="1536" height="1100" resolution="2x"/>
  <source src="/images/hero~1024x550@1x.jpg" width="1024" height="550"  resolution="1x"/>
  <source src="/images/hero~1024x550@2x.jpg" width="2048" height="1100" resolution="2x"/>
  <source src="/images/hero~1280x550@1x.jpg" width="1280" height="550"  resolution="1x"/>
  <source src="/images/hero~1280x550@2x.jpg" width="2560" height="1100" resolution="2x"/>
  <source src="/images/hero~1536x550@1x.jpg" width="1536" height="550"  resolution="1x"/>
  <source src="/images/hero~1536x550@2x.jpg" width="3072" height="1100" resolution="2x"/>
  <img src="/images/background.jpg" width="1920" height="550"/>
</picture>

<style>
  .hero {
    size-hint: 100% 550px;
    background-size: cover;
    background-image: url(/images/background.jpg);
    background-image: image-set(
      url(/images/hero~640x550@1x.jpg)  640px  550px  1x,
      url(/images/hero~640x550@2x.jpg)  1280px 1100px 2x,
      url(/images/hero~768x550@1x.jpg)  768px  550px  1x,
      url(/images/hero~768x550@2x.jpg)  1536px 1100px 2x,
      url(/images/hero~1024x550@1x.jpg) 1024px 550px  1x,
      url(/images/hero~1024x550@2x.jpg) 2048px 1100px 2x,
      url(/images/hero~1280x550@1x.jpg) 1280px 550px  1x,
      url(/images/hero~1280x550@2x.jpg) 2560px 1100px 2x,
      url(/images/hero~1536x550@1x.jpg) 1536px 550px  1x,
      url(/images/hero~1536x550@2x.jpg) 3072px 1100px 2x,
    );
  }
</style>