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

LQIP stands for Low Quality Image Placeholder.

A great implementation of the low quality image placeholder pattern is to display a blurier version of the final image while the real image is loading.

You can get the blurry version of an image by using the output=preview transformation.

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

Both examples load the blurry version by default and replace it with the optimized image when the JavaScript will handle the data-twic- attribute.

When implementing this pattern, do not use src for your blurry images. Search engines will index img tags but not those implemented via CSS. Read our 6 tips to optimize images for SEO.
responsive images

The All-In-One Toolbox For Your Medias

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