<section class="grid">

  <figure class="basic">
    <img src="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/cover=200x233" />
    <figcaption>Basic <code>&lt;img&gt;</code></figcaption>
  </figure>

  <figure class="basic with-twicpics">
    <img data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>Basic <code>&lt;img&gt;</code></figcaption>
  </figure>
  
  <figure class="basic with-twicpics">
    <img src="https://demo.twic.pics/v1/placeholder:eee/eee" data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>Basic <code>&lt;img&gt;</code> with placeholder</figcaption>
  </figure>
  
  <figure class="basic with-twicpics">
    <img src="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/output=preview" data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption><code>&lt;img&gt;</code> with LQIP approach</figcaption>
  </figure>

  <figure class="fit with-twicpics">
    <img data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>&lt;img&gt;</code> with <code>object-fit</code></figcaption>
  </figure>

  <figure class="bg">
    <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/photo-1562034090-aae2d7ece5d6.jpg)"></div>
    <figcaption>Basic <code>background-image</code></figcaption>
  </figure>

  <figure class="bg with-twicpics">
    <div data-twic-background="url(image:codepen/photo-1562034090-aae2d7ece5d6.jpg)"></div>
    <figcaption>Basic <code>background-image</code></figcaption>
  </figure>

  <figure class="basic">
    <img srcset="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/resize=300 1x, https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/resize=600 2x">
    <figcaption><code>srcset</code> with TwicPics API</figcaption>
  </figure>

</section>

<section class="scroll">
  <p>..........................................................................................</p>
  <p>👇Scroll to view 👇</p>
  <p>..........................................................................................</p>
  <p>👇that images below the fold 👇</p>
  <p>..........................................................................................</p>
  <p>👇are lazy loaded by defaut 👇</p>
  <p>..........................................................................................</p>
  <p>👇with TwicPics👇</p>
  <p>..........................................................................................</p>
  <p>👇and that you can easily add effects👇</p>
  <p>..........................................................................................</p>
  <p>👇thanks to TwicPics life cycles👇</p>
  <p>..........................................................................................</p>
</section>
  
<section class="grid">
  <figure class="fit with-twicpics lazy-fade">
    <img data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>Lazy loading with fade effect</figcaption>
  </figure>
  
  <figure class="fit with-twicpics lazy-lqip">
    <img src="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/output=preview" />
    <img data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>Lazy loading with preview</figcaption>
  </figure>
  
  <figure class="fit with-twicpics lazy-lqip">
    <img src="https://demo.twic.pics/codepen/photo-1562034090-aae2d7ece5d6.jpg?twic=v1/output=meancolor" />
    <img data-twic-src="image:codepen/photo-1562034090-aae2d7ece5d6.jpg" />
    <figcaption>Lazy loading with mean color</figcaption>
  </figure>
</section>

<footer></footer>
*, *:before, *:after {
  box-sizing: border-box;
}

.scroll p {
  text-align: center;
  font-weight: bold;
  margin: 30px;
}

footer {
  margin-bottom: 100px;
}

.doc {
  width: 80%;
  margin: auto;
  margin-bottom: 40px;
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

figure {
  position: relative;
  outline: thin #c0c0c0 solid;
  border: 5px #fff solid;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
}

figure.with-twicpics::before {
  content: "TwicPics script";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: inline-block;
  color: white;
  background-color: red;
  padding: 3px 5px;
  font-size: smaller;
}

img {
  display: block;
}

figure.basic > img {
  width: 200px;
  height: 233px;
}

figure.fit > img {
  object-fit: cover;
  width: 200px;
  height: 200px;
}

figure.bg > div {
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 200px;
}

figure.lazy-fade > img {
  opacity: 0;
  transition: opacity 1s;
}

figure.lazy-fade > img.twic-done {
  opacity: 1;
}

figure.lazy-lqip {
  position: relative;
}

figure.lazy-lqip > img:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s linear;
  will-change: opacity;
}

figure.lazy-lqip > img.twic-done {
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://demo.twic.pics/v1/script