Placeholder image

how to use the placeholder image to get the best out the plugin

The best way to use this plugin is to have a much smaller placeholder image to serve before the full-size image gets loaded; this will allow the plugin to fill the space with a blurred image that fades out to reveal the full-size sharper image underneath.

The placeholder image should be 1-2% of the original image size and maintain the same aspect ratio so that the transition between the picture is as natural as possible. Since the placeholder image is just a fraction in size of the original, it will be downloaded by the browser very quickly and give immediate feedback to the user that something is loading.

<template>
  <ProgressiveImage
    placeholder-src="https://picsum.photos/id/1080/19/10"
    src="https://picsum.photos/id/1080/1980/1080"
  />
</template>

Unfortunately, generating on-the-fly placeholder images is not possible in the browser. Still, you can achieve this using module bundlers like Webpack or Rollup, or it can be done with Node or PHP in your backend and served via an API end-point, for example.