Discuss

Using Placeholder Image with Lazy Load

On this page

In some cases, where your images are huge in size it can be useful to use an image placeholder, while the original image is loading.

In this tutorial we will show you how to use a low-quality version of the original image as a placeholder. This way the users see the low quality version, while the high-quality one is loading. It is really nice as they get the impression of what will be loaded after the loading finishes.

We saved a really low quality jpeg using Adobe Photoshop (of course you can use any other image editing program for this).

Let's start with adding the image on our page:

Screenshot_2|690x383

Open the Content category and add image:

Screenshot_3|690x383

The low quality image, or the placeholder you are using must be selected in the standard src field:

Screenshot_4|690x383

Browse to the low quality image / placeholder image and select it:

Screenshot_5|690x383

Then enable the responsive option:

Screenshot_6|690x383

And add new dynamic attribute:

Screenshot_7|690x383

Open the Display category and add Lazy Load:

Screenshot_8|690x383

Browse to your original image:

Screenshot_9|690x383

Select it:

Screenshot_10|690x383

And you are done. Now you added both - low quality image and the original one:

Screenshot_11|690x383

You can see that the low quality version / image placeholder is displayed while the original image is being loaded:

ezgif-1-f9f6189dbac9|690x456


WapplerPrevious|101x31   WapplerNext|77x31