New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Artifacts when using transparent images #5
Comments
Hi Christoph, first and foremost: thanks for the flowers. That does look ugly, indeed. The plugin uses Kirby's thumbnail generation, which itself uses PHP's GD library (unless you're using ImageMagick). It seems like your transparent image isn't handled well. For the time being I don't have a quick solution, sorry. Would you mind posting the source image here so I can replicate the artifacts? |
I had a look at the way the blurry SVG is generated. In addition to the self-explanatory gaussian blur there's also a For transparent images it might make sense to simply remove this. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {$svgWidth} {$svgHeight}">
<filter id="b" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation=".5"></feGaussianBlur>
- <feComponentTransfer>
- <feFuncA type="discrete" tableValues="1 1"></feFuncA>
- </feComponentTransfer>
</filter>
<image filter="url(#b)" x="0" y="0" width="100%" height="100%" href="{$placeholderImage}"></image>
</svg> |
Depending on the project it might make sense to add a white background behind images via a feFlood filter instead: <feFlood flood-color="white" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge> |
@medienbaecker Thanks a lot for your thorough research! Amazing. 🤯 |
I use a forked version of this plugin in my project and added a custom transparent option that lets me toggle the snippet @medienbaecker highlighted. It's not the best idea, as I haven't implemented a way to detect transparent images, but most of the time when I use them I know beforehand (e.g. logos, clip arts, etc.), so I can set the value in code. |
@ChristophLabacher @medienbaecker With all of your help and @tobimori's implementation, this issue can finally be closed. Thank you all for your input! I wouldn't have managed to find time for a deep-dive into the issue. Feels good to finally close this. With version 3.0.0, the presence of an alpha channel in the image will be evaluated by the plugin. In any case, you can now pass an option parameter to disable the SVG filter, which resolves the blur artifacts: $file->placeholderUri([
'transparent' => true
]); |
First of all, thanks for the plugin – it’s awesome!
Unfortunately I am having some problems when using it for transparent PNG files, there are some heavy artifacts in the blurred version of the image:
The text was updated successfully, but these errors were encountered: