Implement simple colour inline image fall backs while loading

[brendanheywood]

When we process the image and resize it we can also do further processing and reduce the image to a single colour (or maybe a set of 4 colors) and then we render these inline as part of the placeholder either as a background color or an inline data url which then gets swapped out when it lazy loads. More useful when the threshold for loading is within the visible bounds, or when you are scrolling fast and the loading can't keep up. You would still have some sort of lazy loading spinner probably the bootstrap one as well.

Single color - generally better to go with a median color rather than an average:

https://css-tricks.com/the-complete-guide-to-lazy-loading-images/#aa-dominant-color-placeholder

https://web.dev/lazy-loading-images/

https://web.dev/lazy-loading-best-practices/

[gthomas2]

Hi Brendan. I love the single color idea. Maybe we could overlay the existing image placeholder over a background of the single color.

[brendanheywood]

Yup the loading spinner on top of the fixed color or gradient will be nice