responsive-images.html

<picture size-hint="100% 550px">
  <source src="/images/[email protected]"  width="640"  height="550"  resolution="1x"/>
  <source src="/images/[email protected]"  width="1280" height="1100" resolution="2x"/>
  <source src="/images/[email protected]"  width="768"  height="550"  resolution="1x"/>
  <source src="/images/[email protected]"  width="1536" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1024" height="550"  resolution="1x"/>
  <source src="/images/[email protected]" width="2048" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1280" height="550"  resolution="1x"/>
  <source src="/images/[email protected]" width="2560" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1536" height="550"  resolution="1x"/>
  <source src="/images/[email protected]" 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/[email protected])  640px  550px  1x,
      url(/images/[email protected])  1280px 1100px 2x,
      url(/images/[email protected])  768px  550px  1x,
      url(/images/[email protected])  1536px 1100px 2x,
      url(/images/[email protected]) 1024px 550px  1x,
      url(/images/[email protected]) 2048px 1100px 2x,
      url(/images/[email protected]) 1280px 550px  1x,
      url(/images/[email protected]) 2560px 1100px 2x,
      url(/images/[email protected]) 1536px 550px  1x,
      url(/images/[email protected]) 3072px 1100px 2x,
    );
  }
</style>