Progressive and optimized loading images with SXA – How To Implement Series

After successful implementation of the Responsive images in SXA I am resuming to my older actual blog post, that was left behind.

Today I am writing about Progressive loading image. It’s basically the lazy loading images but is more appealing than the loader. First it loads the small blurry image, and show the large image with transition.

Medium’s technique to load images,  This is how it looks.

2018-07-01_1810.png

How it works:

  • Small blurred image is requested instead of large one, which is of less than 2KB.
  • Blur effect is applied using a CSS filter.
  • Request the large image.

Benefit:

The good thing about this practice is that, images will lazy load with blur effect and the website will be fast enough to engage the user in it. Overall the performance of the website will improve. This practice is recommended for rich graphics website.

Simple Implementation:

Here is how you implement it:

Step 1:

First we need to create a template for the extra fields, and inherit that template in our existing component in order to introduce the `ThumbImage` field.

Step 2:

We need to map this markup in our rendering variant of the image component.

This is how our rendering variant will look.

Make sure the link checkbox is not checked in this on the image node.

Padding-div is an empty section div. wrapped in div section with class `placeholder-padding`

Step 3:

Upload your CSS and JS files in your theme folder, and publish the full website.

Result:

This is how it will look in your console timeline.

Here is the video link of the implemented video.

Here is the basic exmaple for the implemented functionality


Advanced Implementation:

There is a very good library “Progressively” that is optimized and good for progressive image loading,  Here is how you implement it the SXA:

Step 1:

We need to create a template for the extra fields, and inherit that template in our existing component in order to introduce the `ThumbImage` field. We can use the existing one we created in simple implementation.

Step 2:

We need to map this markup in our rendering variant of the image component.

Step 3:

Create a rendering variant to utilize the template and implement the markup we need.

Make sure that image tag should be empty and should not be wrapped into any of the HTML tag. and apply the class and add the thumb as the data-attribute.

Step 4:

Upload your CSS and JS files of progressively in your theme folder.

Step 5:

Initialize it, we have a few options with it. And publish the full website.

Result:

This is how the end result will look like:

Thanks @thinker3197 for all the effort.


Enhancement:

It can be further enhanced creating the thumbnail version for the very same images. (Recommended library is Dianoga)

Feel free, to use it and share your feedback. Cheers!

Reference Links

Sitecore Experience Platform 9 update 1
Sitecore SXA 1.7 
How Medium does progressive image loading

Don’t forget to check my previous article Responsive images with Sitecore Experience Accelerator – How To Implement Series

6 thoughts on “Progressive and optimized loading images with SXA – How To Implement Series

Share what's in your Mind :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.