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.


  <source media="(max-width: 767px)"
          srcset="https://<sub> 300w,
                  https://<sub> 500w,
                  https://<sub> 700w,
                  https://<sub> 900w">

  <source media="(min-width: 992px)"
          srcset="https://<sub> 1000w,
                  https://<sub> 1500w,
                  https://<sub> 1900w">

  <source media="(min-width: 768px)"
          srcset="https://<sub> 800w,
                  https://<sub> 1000w,
                  https://<sub> 1200w">

  <img src="https://<sub>">

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.

    style="object-fit: cover"
This approach is particularly well adapted for picture grids.

Remember: the TwicPics Script can also handle backgrounds!

    style="background-size: cover"

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.

    style="object-fit: cover"

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:

      background-size: cover;
responsive images

The All-In-One Toolbox For Your Images

The simplest, most powerful way to tackle responsive images