Pwa-studio: Load Images Progressively

[supernova-at]

Overview

PWA Studio has code in place to load the correct image sizes based on responsive design patterns.

What this issue aims to tackle is the related but slightly different concept of "progressive image loading". Progressive image loading is a technique used to affect the perceived performance of the application.

Here's a picture that illustrates the technique:

A Possible Approach

Using this article as a guide, the basic idea is as follows:

1. Always request the smallest version of the image
2. When the small version of the image loads, render it with a blur filter or similar on top of it
3. Request the actual size of the image we want¹
4. When the actual image loads, replace the small version in the DOM

There are additional approaches discussed in the article above and we can likely come up with some of our own. For example, we could inline the small image data (increases initial bundle size but removes the need to make that extra request), or inline an "image loading" placeholder that gets replaced once the image loads (wouldn't want the blur affect for this one).

In fact, our Image component already supports a placeholder, we just don't use it in very many places (and when we do it's the transparent placeholder).

An empty gray box is only slightly better than an empty white box

Using something like a small animated "loading image" that we could inline include with the bundle is an option too.

¹ See #1689 for lazy image loading techniques.

[sirugh]

Have you heard the good word about the new attribute in chrome, "loading"?

https://addyosmani.com/blog/lazy-loading/

[brendanfalkowski]

Same as? https://github.com/magento/pwa-studio/issues/1689

Helped test the canary release of the loading attribute, and it's in pretty good shape now.

Edit — D'oh just saw the last line.

[supernova-at]

Thanks for the links!

This issue is intended to be slightly different than lazy loading - I meant for this ticket to take over once the browser knows that it should definitely show the target image.

I'm envisioning that at this time, the browser would request both the placeholder - either a small version of the actual image, or an inlined (possibly animated) "loading" image - and the full image. Until the full image is fully loaded, we show the low-res / blurred version of the image. Once the full image is ready, we show that.

If loading="lazy" proves to make this issue a low priority then I'm all for that too 🎉 .

And yes, #1689 is the correct issue for tracking lazy loading.