Make placeholders smoother
CHE1RON opened this issue · 9 comments
Hey there,
when using your plugin "as-is", I get this:
From the banner image, I was under the impression to get softer gradients and overall smoother images, is there a way to "improve" the output quality by tweaking parameters? Or is it my images (strong light/shadow transitions etc)
Thanks!
// Edit:
For PNG files with transparency, I get this:
Hello there!
You can try to improve the pixel target to generate bigger thumbnails (although not recommended), which are embedded into the blurry SVG placeholder. The implementation mocks the one from Google's former AMP project. I'm not sure what you expected. In my opinion, your placeholders are smooth. Every image is different. So yeah, maybe it's the color contrast.
Regarding transparent images, there is the transparent option for both $file->placeholder() and $file->placeholderUri() field methods. It will omit the artifacts of transparent images.
There is also a different implementation for blurry images using the blurhash algorithm by @tobimori which you might prefer, since more details is preserved. You can check it out as well: kirby-blurhash
You can customize the blur by adjusting the stdDeviation in https://github.com/johannschopplich/kirby-blurry-placeholder/blob/main/BlurryPlaceholder.php#L54
@tobimori Great input!
Thanks you guys! Seems even @johannschopplich learned something 😅 (just kidding)
Absolutely! The younger generation builds upon what the older one has created and teaches a lesson or two. Circle of life.
The Gaussian blur parameter could be a plugin option.
Not sure about who's the younger generation here
That's what I ended up with (note the blur in the beginning, the bw-color effect applies to all images, see the end of the clip, when scrolling up again)
lazy_480.mov
The filesize savings are quite decent, and in accordance with the bw effect, with placeholders being generated as bw, this shaves some additional kb
Absolutely! The younger generation builds upon what the older one has created and teaches a lesson or two. Circle of life.
🙃 The Gaussian blur parameter could be a plugin option. 👀
TOTALLY!