Background color mode

[kurtextrem]

Another cool technique would be showing background colors instead of base64 images - that also saves bandwidth. See here: https://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/
Could be useful to integrate as an option?

[zouhir]

Thanks for the suggestion! I can add that as an option to suggest a hex CSS color or colors palette as preSrc 🤔

[kurtextrem]

Sounds awesome :)

[themre]

or adding array of HEX to generate linear gradient would be awesome

[developit]

Could return an SVG or a tiny png of a flat color (or gradient). That way the API is always as simple as assigning preSrc. Having different modes produce different objects would be hard to follow.

[zouhir]

Those are all great ideas! The webpack folks said in the docs "make sure your webpack loader does 1 task only" and they recommended chaining loaders.

We can make lqip-colors-loader that can be chained right after lqip-loader as you see usually see in style and less, sass loaders. and once they chained the final object you get can be like:

{
      "background": "#00D7BC",
      "background-image": "linear-gradient(100deg, #31BADA 0%, #07FFA7 100%)",
      "preSrc": "a-green-and-blue-image-in-base64",
      "src":  "/a-green-and-blue-base-banner-original-source.jpg"
}

that's kind of my thoughts inspired by all previous comments. any thoughts, happy to flip things around to come out with more creative solution! 😃

[shelldandy]

Wanted to add to the conversation by saying there's a node package that does this:

https://github.com/akfish/node-vibrant

Maybe just plop it in and generate the object as proposed above ☝️

[zouhir]

This has just been released in v2!

thanks for the suggestions literally everyone in this ticket!