<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"
      style="--twic-ratio:calc(16/9);--twic-mode:contain;"
    >
        <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>
    <div
      class="cls-optimization"
      style="--twic-ratio:calc(21/9);"
    >
      <img
           class="media" 
           data-twic-src="image:glass-pyramid.jpg"
           />
      <div
           class="placeholder" 
           data-twic-background="url(image:glass-pyramid.jpg)"
           data-twic-transform="*/output=preview"
           ></div>
    </div>
    <div class="info">NO CLS HERE</div>
    <div class="cls-optimization">
      <img
           class="media" 
           data-twic-src="image:glass-pyramid.jpg"
           />
      <div
           class="placeholder" 
           data-twic-background="url(image:glass-pyramid.jpg)"
           data-twic-transform="*/output=preview"
           ></div>
    </div>
    <div class="info">NO CLS HERE</div>
    <div class="cls-optimization paysage">
      <img
           class="media" 
           data-twic-src="image:glass-pyramid.jpg"
           />
      <div
           class="placeholder" 
           data-twic-background="url(image:glass-pyramid.jpg)"
           data-twic-transform="*/output=preview"
           ></div>
    </div>
    <div class="info">NO CLS HERE</div>
    <div class="cls-optimization portrait">
      <img
           class="media" 
           data-twic-src="image:glass-pyramid.jpg"
           />
      <div
           class="placeholder" 
           data-twic-background="url(image:glass-pyramid.jpg)"
           data-twic-transform="*/output=preview"
           ></div>
    </div>
    <div class="info">NO CLS HERE</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;
}

.paysage {
  --twic-ratio:calc(4/3);
}

.portrait {
  --twic-ratio:calc(3/4);
}

.info {
  padding: 0.5em;
  text-align:center;
}


/* 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: var( --twic-mode, cover );
}
.placeholder {
  background: no-repeat;
  background-position: center;
  background-size: var( --twic-mode, cover );
  opacity: 1;
  transition-property: opacity;
  transition-duration:var( --twic-duration, 400ms );
  will-change: opacity;
}
.media.twic-done+.placeholder {
  opacity: 0; /* hides placeholder once image is loaded */
}
.cls-optimization{
  position: relative;
  aspect-ratio: var( --twic-ratio, 1 ); /* reserves the display size */
  width:100%;
}
.cls-optimization img:not([src]) {
  /* avoid broken images */
  visibility: hidden;
}




View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.