feature request: lqip

[eleith]

using something like lqip, i think it would be useful to import and image and request a low quality image placeholder to be generated (or to just extract the dominant color instead).

you likely could use these loaders independently, but i like the decision of this library to use url query params to drive signaling of intent on how to handle the image and i could imagine a ?lqip or ?lqip-dominant-color as extensions of this module.

for now, i'm just generating these myself, but in the spirit of DRY, this might be a useful direction to consider. i'ld be interested if you felt the same way or had previously considered and rejected the idea.

[cyrilwanner]

Thank you for the feature request @eleith, I really like this idea. For me, this is also a part of image/performance optimization and I think it will fit well into this package (as we already generate webp on the fly for example).

I'm planning to rewrite this package (as it grew larger than expected and to be able to handle exactly the resource queries better) and release version 2 within the next few weeks. The plan is that all optimizations will be optional and when someone wants to use a specific optimization (like webp or lqip), he then just can install the required npm dependency and use the resource query provided by this package.
Image optimization packages are often big and require native binaries which not everyone uses in the end so this will also reduce installation time and fix some possible issues in CI/CD environments. img-loader (which next-optimized-images depends on) also went into the same direction.

Long story short, I'll add this optimization in version 2 :) I hope generating them for yourself still works in the meantime, I'll definitely keep you posted on this topic.
Also, feel free to comment here or open new issues if you have more ideas for improvements :)

[eleith]

thank you for the revealing response =]

this has been a great library to work with. both in terms of using it to solve a very focused problem with web development in nextjs but also as a pattern for solving similar problems (i used your pattern to deal with serving fonts locally by using the file loader to both rename and copy them to an internal _next folder)

anyhow, the roadmap looks great. i will be both happy to use it and customize it for some problems i am particularly interested in (resizing of images, auto LQIP production, etc etc)

[cyrilwanner]

Hey @eleith
Unfortunately, it took me way longer to create v2 and implement this feature than I expected at first and I'm sorry about that (there were some other projects which came into my way).

But I now implemented LQIP into v2.1.0 as an optional package.
So if you are on version 2.1.0, you can simply run npm install lqip-loader and then just use the resource query, next-optimized-images automatically detects the installed package. (If you are on v1.x, please read the upgrade guide to v2 first as there were some breaking changes)

There are now two additional resource queries: ?lqip and ?lqip-colors.

I would be happy if you can test it sometime and give feedback if it works as you expected it :)

Example implementation:

export default () => (
	<div>
		<img src={require('./images/lqip-test.jpg?lqip')} />
		<Palette colors={require('./images/lqip-test.jpg?lqip-colors')} />
	</div>
);

[eleith]

trying it out right now and am happy with the results.

upgrading to v2 was fairly straight forward and i'll be slowly replacing my custom lqip with these. i like how the lqip image is inlined when the image is small.

i likely will need to use the css blur effect to make it look less blocky, but that is a concern of how the browser stretches out tiny images.

thanks again for taking on the rewrite and improving this library even more.