<main>
  <figure style="background-image:url(https://demo.twic.pics/codepen/tp-rasp.jpg?twic=v1/cover=4:3/output=preview)">
    <img data-twic-src="image:codepen/tp-rasp.jpg">
  </figure>
</main>

<script src="https://demo.twic.pics/?v1" async></script>

body {
  background: black;
}

main {
  display: flex;
}

figure {
  position: relative;
  margin: 30px auto;
  width: 400px;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s linear;
  will-change: opacity;
}

img.twic-done {
  opacity: 1;
}