Best Practices

We recommend using native responsive images combined with the TwicPics API for critical images and the TwicPics Script for off-screen images.

Critical Images

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

Using the TwicPics URL API, you can easily create responsive variants of your images.

<picture>

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

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

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

  <img src="https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:9/resize=1024">

</picture>
This type of assets can also leverage the <link rel=preload> declarative fetch feature.

Lazy-load off-screen media

All assets handled by the TwicPics Script are lazy-loaded by default so off-screen images are ideal candidates for pure Script-backed markup.

<img
    style="object-fit: cover"
    data-twic-src="image:asset.jpg"
>
This approach is particularly well adapted for picture grids.

Remember: the TwicPics Script can also handle backgrounds!

<div
    style="background-size: cover"
    data-twic-background="url(image:asset.jpg)"
>

LQIP / Blurry Image Placeholder

By combining the power of the TwiPics Script and the TwicPics API, you can easily implement the « Low Quality Image Placeholder » pattern.

<img
    style="object-fit: cover"
    src="https://<sub>.twic.pics/asset.jpg?twic=v1/output=preview"
    data-twic-src="image:asset.jpg"
>

This snippet tells the browser to load a blurry preview first (output=preview) and to replace it with the full version later on.

Same goes for backgrounds:

<div
    style="
      background-size: cover;
      background-image:
        url(https://<sub>.twic.pics/asset.jpg?twic=v1/output=preview)
    "
    data-twic-background="url(image:asset.jpg)"
>
responsive images

The All-In-One Toolbox For Your Images

The simplest, most powerful way to tackle responsive images.