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.
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
generateBlurryPlaceholder
option to the preset configurationgenerateBlurryPlaceholder
option will generate a 20px wide base64-inlined PNG of the image and add it to theplaceholder
key of the last item in the returned image arrayinferDimensions
option, which is also added to the last returned image, because this is likely the item that'll be used on theimg
tag in apicture
scenarioCaveats / Out of Scope
placeholder
as a key to the returnedImageAttrs
makes the object deviate from valid HTML image attributes, so you couldn’t simple prop-spread them into animg
tag. So we might want to find a better place to put the placeholder