<main>
  <figure>
    <img src="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/output=preview">
    <img class="hq" data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg">
  </figure>
</main>

<script src="https://demo.twic.pics/v1/script" async></script>
body {
  background: black;
}

main {
  display: flex;
}

figure {
  position: relative;
  margin: 30px auto;
  width: 400px;
  height: 600px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.hq {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s linear;
  will-change: opacity;
}

img.twic-done {
  opacity: 1;
}






External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.