<head>
    <!-- Twicpics script installation -->
    <script src="https://demo.twic.pics/?v1" async defer></script>
</head>

<body>
  <header>
    <img src="https://assets.twicpics.com/videos/demo-twicpics/logo-white.png" alt="TwicPics logo" />
  </header>
  <main>
    <div class="cls-optimization">
      <img
           class="media" 
           data-twic-src="image:glass-pyramid.jpg"
       />
      <div
           class="placeholder"
           data-twic-eager
           data-twic-background="url(image:glass-pyramid.jpg)"
           data-twic-transform="*/output=preview"
      ></div>
    </div>
    <div class="info">NO CLS HERE</div>
  </main>
</body>


/* OUR TEMPLATE */
.media, .placeholder {
  /* preview and final image must stack and fill their container */
  height: 100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.media {
  object-fit: cover;
}
.placeholder {
  background-size: cover;
  opacity: 1;
  transition-property: opacity;
  transition-duration:400ms;
  will-change: opacity;
}
.media.twic-done+.placeholder {
  opacity: 0; /* hides placeholder once image is loaded */
}
.cls-optimization{
  position: relative;
  aspect-ratio: 16/9; /* reserves the display size */
  width:100%;
}
.cls-optimization img:not([src]) {
  /* avoid broken images */
  visibility: hidden;
}

/* YOUR OWN CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0 8px 0;
  background-color: #9002ff;
  & img {
    width: 140px;
  }
}
main {
  padding:2em;
}
.info {
  padding: 0.5em;
  text-align:center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.