Add a low-quality-placeholder directive

This has been a requested feature and one that I’d argue is a wothwhile addition to the library. I’m not quite sure on the specific syntax though and would like to get some feedback!

My proposal would be:

• Keyword: lqip
• Type: boolean

Where lqip invokes the following steps:

1. resize to a width of 640px
2. set quality to 50

The question is wether these values should be customizeable on if so how? An integer that scales the values accordingly? I don’t want this directive to do too much since stuff like blurring can and should be added by the user to their liking.

_Originally posted by @rchrdnsh in https://github.com/JonasKruckenberg/imagetools/discussions/69_

[cryptodeal]

I agree on blurring, that should be handled by the user to fit their desired aesthetic.

I do think both the size and quality should be customizable to an extent (I like the idea of using an integer that scales the values accordingly), but I don’t think there’s really a need for fine grained controls given lqip would be, ultimately, for the sake of convenience.

If a user needs the ability to highly customize the placeholder image, they should import the placeholder using the provided directives as that’s going to give the most granular control in terms of the resulting image.

E.g. I currently import placeholder images, which is passed into a lazy loading responsive image component (along w the srcset imported separately), by doing the following:

import logo from './logo.jpg?w=300&blur=100&quality=30';

Edit: Great work on this library by the way; love using it in with SvelteKit.

[bdlowery]

Is this an official feature now? It looks like it was added as a directive by @JonasKruckenberg. Not mentioned in the Docs however.