🚀 We're launching Video Optimization in beta! Read the announcement.

Image Best Practices

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

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.

By writing API requests, 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)"
></div>

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)"
></div>
responsive images

The All-In-One Toolbox For Your Medias

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