LDS Example

example.html

<style scoped>
  .hero-placeholder {
    background-image: url("https://my-source.imgix.net/header1.jpg?w=320");
  }

  @media (min-width: 640px) {
    .hero-placeholder {
      background-image: url("https://my-source.imgix.net/header1.jpg?w=640");
    }
  }

  @media (min-width: 960px) {
    .hero-placeholder {
      background-image: url("https://my-source.imgix.net/header1.jpg?w=960");
    }
  }
</style>

<section class="hero-placeholder">
  Lorem ipsum dolor sit amet
</section>

This is linked to from https://blog.imgix.com/2016/06/22/imgix-js-3

I saw the use of the "scoped" attribute - not knowing what it was, I was quick to learn that it's all but dead. Seemed very short lived although I could see lost of frameworks would live this in their spaghetti output. On top of that - this gist doesn't really show it's correct usage anyway (would need a wrapper HTML element).