<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 portrait">
         <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>
         <span>I am supposed to have a 3/4 aspect ratio</span> 
      </div>
      <div class="cls-optimization paysage">
         <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>
        <span>I am supposed to have a 4/3 aspect ratio</span>
      </div>
      </div>
      <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>
        <span>I am supposed to have a 1/1 aspect ratio</span>
      </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;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

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

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

/* 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{
  overflow: hidden;
  position: relative;
  padding-top: calc( 100% / var( --twic-ratio, 1 ) ); /* reserves the display size */
  width:100%;
}

.cls-optimization img:not([src]) {
  /* avoid broken images */
  visibility: hidden;
}

/** SPAN **/
.cls-optimization span {
  color: #fff;
  left:1em;
  position:absolute;
  top:1em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.