Blurred Placeholders

While the image is still loading, the Blurred Preview feature by TwicPics enables to display a very lightweight blurred version as a placeholder. This approach coupled with lazy loading helps to deliver a particularly fluid User Experience.

Low-Quality Image Placeholders (LQIP) are a powerful lever to reduce perceived page load time. The placeholders have the same dimensions as the original image but typically weigh mere kilobytes, so that the stable and interactive page layout is delivered to the visitor's browser almost immediately.

What is Blurred Preview?

There are different ways to build placeholders.

A simple and widespread implementation is to use a rectangle filled with color derived from the original image.

Another approach is to reduce the original's resolution drastically and create its extremely compressed version.

The Blurred Preview feature by TwicPics goes further. It blurs your source image and renders an SVG placeholder on the fly. This yields a better compromise between perceived speed and quality:

How to Use the Blurred Preview Feature?

To create a Blurred Preview, simply use the output=preview API transformation.

For example, to display a 4/3 ratio, 400px width blurred preview:

<img
  src="https://demo.twic.pics/tp-rasp.jpg?twic=v1/cover=4:3/resize=400/output=preview"
/>

Combined with the automatic lazy loading and dynamic sizing of TwicPics, you can take advantage of Blurred Previews by using them as background placeholders. The so-called LQIP approach:

If you are using VueJS, React or Svelte, you can even use TwicPics Components to automate the full process.

Want to try with your images? Create an account, map your TwicPics domain to your image source URL and you're ready to go! Did I mention that it's free?