Image Best Practices

Learn to implement image best practices for critical images, lazy loading, and low quality image placeholder.

Critical Images

We recommend using the TwicPicture component for critical images as it involves the native picture element under the hood.

  ratio="3/4, @md 1, @xl 16/9"

In case you're not using any JS framework client-side, 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.

By writing API requests, you can easily create responsive variants of your images.

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

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

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

  <img src="https://<sub>" />
This type of asset can also leverage the <link rel=preload> declarative fetch feature and the fetchpriority attribute.

Lazy-load off-screen media

Off-screen or content images are ideal candidates for TwicPics Components and TwicPics Native. Your assets will be automatically resized and lazy-loaded by default.

However, the <TwicImg> component offers many benefits out-of-the-box, like optimized Cumulative Layout Shift (CLS), aspect-ratio modifier, Low-Quality Image Placeholder (LQIP), or transitions:

<TwicImg src="your-image.jpg" 
This approach is particularly well adapted for picture grids.

With TwicPics Native, you can achieve the same result even if it requires more effort and CSS knowledge.

Here is an HTML / CSS example template to integrate LQIP and CLS optimization into your websites using TwicPics Native:

  <!-- Twicpics script installation -->
  <script src="https://<your-own-twicpics-domain>/?v1" async defer></script>
  /* required when using the padding-trick */
  .isolation {
    overflow: hidden;
  .placeholder {
    /* reset border, margin and padding */
    border: none;
    margin: 0;
    padding: 0;
    /* 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; /* makes transition smooth */
    transition-duration: var(
    ); /* makes transition smooth */
    will-change: opacity; /* makes transition smooth */
  .media.twic-done + .placeholder {
    opacity: 0; /* hides placeholder once image is loaded */
  .cls-optimization {
    overflow: hidden; /* allows border-radius for example */
    position: relative;
    padding-top: calc(
      100% / var(--twic-ratio, 1)
    ); /* padding trick : reserves the display size */
    width: 100%;
  .cls-optimization img:not([src]) {
    /* avoid broken images */
    visibility: hidden;

  /* YOUR OWN CSS */
  .a-custom-class {
    --twic-duration: calc(500ms); 
    --twic-mode: cover; 
    --twic-ratio: calc(4/3);

  <div class="isolation a-custom-class">
    <!-- makes the template work even in display:grid -->
    <div class="cls-optimization">
      <img class="media" data-twic-src="image:<your-asset>.jpg" />
To learn more about this template, read our [CLS optimization and LQIP implementation](/blog/how-to-easily-cls-and-lqip) blog post.
responsive images

The All-In-One Toolbox For Your Medias

The simplest, most powerful way to tackle responsive images & videos