Add option to generate blurry placeholders

[lucasdinonolte]

Hi there, first of all thanks for this amazing vite plugin, I'm using it a bunch.

Context

I often found myself in the situation where I wanted to roll my own lazy loading using IntersectionObserver and show a blurry version of the image until the original image is loaded in.

What this PR does

• adds the generateBlurryPlaceholder option to the preset configuration
• if set, the generateBlurryPlaceholder option will generate a 20px wide base64-inlined PNG of the image and add it to the placeholder key of the last item in the returned image array
  • this follows the same assumption as the inferDimensions option, which is also added to the last returned image, because this is likely the item that'll be used on the img tag in a picture scenario

Caveats / Out of Scope

• Adding placeholder as a key to the returned ImageAttrs makes the object deviate from valid HTML image attributes, so you couldn’t simple prop-spread them into an img tag. So we might want to find a better place to put the placeholder
• This PR only adds the blurry-image placeholder strategy. We might consider adding multiple strategies such as "dominant color" etc.

[netlify[bot]]

❌ Deploy Preview for image-presets failed.

Name	Link
🔨 Latest commit	07283190f57128d0c32db2939c7a7b8527df0e35
🔍 Latest deploy log	https://app.netlify.com/sites/image-presets/deploys/6565b46b2454050008d6a28e