Best Practices

We recommend using responsive images combined with TwicPics API for critical images and TwicPics JS library for off-screen images. Whatever the scenario, you get the best performance in no time.

Critical Images

We recommend using native responsive images combined with TwicPics API for images that are displayed at the top of page. The picture element with an img fallback is the best choice in this case.

Thanks to the scaling, smart cropping and optimization features of TwicPics URL API, you can easily adapt your media to your responsive layout while using your master only.

<picture>

  <source media="(max-width: 767px)"
          srcset="https://i.twic.pics/v1/cover=1:1/resize=300/http://mydomain/mymasterimage.jpg 300w,
                  https://i.twic.pics/v1/cover=1:1/resize=500/http://mydomain/mymasterimage.jpg 500w,
                  https://i.twic.pics/v1/cover=1:1/resize=700/http://mydomain/mymasterimage.jpg 700w,
                  https://i.twic.pics/v1/cover=1:1/resize=900/http://mydomain/mymasterimage.jpg 900w">

  <source media="(min-width: 992px)" 
          srcset="https://i.twic.pics/v1/cover=16:4/resize=1000/http://mydomain/mymasterimage.jpg 1000w,
                  https://i.twic.pics/v1/cover=16:4/resize=1500/http://mydomain/mymasterimage.jpg 1500w,
                  https://i.twic.pics/v1/cover=16:4/resize=1900/http://mydomain/mymasterimage.jpg 1900w">

  <source media="(min-width: 768px)"
          srcset="https://i.twic.pics/v1/cover=16:9/resize=800/http://mydomain/mymasterimage.jpg 800w,
                  https://i.twic.pics/v1/cover=16:9/resize=1000/http://mydomain/mymasterimage.jpg 1000w,
                  https://i.twic.pics/v1/cover=16:9/resize=1200/http://mydomain/mymasterimage.jpg 1200w">

  <img src="https://i.twic.pics/v1/cover=16:9/resize=1024/http://mydomain/mymasterimage.jpg">

</picture>

This kind of assets can also take advantage of the <link rel=preload> declarative fetch feature.

LQIP / Blurry Image Placeholder

By combining the power of the unobtrusive javascript library and the API, you can simply implement the so called « Low Quality Image Placeholder » pattern.

<img class="twic" data-src="http://mydomain/mymasterimage.jpg" data-src-transform="cover" src="https://i.twic.pics/v1/resize=2p/http://mydomain/mymasterimage.jpg">

This snippet tells the browser to load a low quality image first (resize=2p means 2% of the master width) and to replace it with a pixel perfect one when ready.

The LQIP technique can be enhanced by combining it with CSS transitions/animation to sharpen/unblur or overfade the LQIP image.

img {
  filter: blur(25px);
  will-change: filter;
  transition: filter .2s linear;
}

img.twic-done {
  filter: blur(0);
}

TwicPics uses CSS classes to enables you to interact with its lifecycle. Get more info in the Script doc.

Lazy-load off-screen media

All assets handled by TwicPics are lazy-loaded by default. Which means off-screen images are ideal candidates for TwicPics’ simplest markup pattern.

<img class="twic" data-src="http://mydomain/mymasterimage.jpg" data-src-transform="cover">

This approach is particularly well adapted for pictures grids where you define a background color placeholder.

You can alternativly use the same technic with CSS background images which are also handled by TwicPics library:

<div class="twic" data-background="url(http://mydomain/mymasterimage.jpg)" style="background-size:cover; background-color: grey">