<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="center">
        <div class="cls-optimization rounded">
            <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>
  </main>
</body>


/* 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;
}

.center {
  width : 75%;
  margin:auto;
}
.rounded {
  border-radius:100%;
  border:solid #CCCCCC 2em;
}

/* OUR TEMPLATE */
.cls-optimization {
  overflow:hidden; /* allows border-radius for example */
  position: relative;
  aspect-ratio: var( --twic-ratio, 1 ); /* reserves the display size */
  width:100%;
}
.cls-optimization img:not([src]) {
  /* avoid broken images */
  visibility: hidden;
}
.media, .placeholder {
  /* reset border, margin and padding */ 
  border: none;
  margin: 0;
  padding: 0;
  /* preview and final image must stack and fill their container */
  height: 100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.media {
  object-fit: var( --twic-mode, cover );
}
.placeholder {
  background: no-repeat; /* useful for --twic-mode:contain */
  background-position: center; /* useful for --twic-mode:contain */
  background-size: var( --twic-mode, cover );
  opacity: 1;
  transition-property: opacity; /* makes transition smooth */
  transition-duration:var( --twic-duration, 400ms ); /* makes transition smooth */
  will-change: opacity; /* makes transition smooth */
}
.media.twic-done+.placeholder {
  opacity: 0; /* hides placeholder once image is loaded */
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.