Closed arturbien closed 1 year ago
I've already investigated the issue and I've found the line that causes it:
The "feComponentTransfer" primitive is used to make semi-transparent pixels from the blurred image solid (fixing the feathered edges issue), but only for JPEG images. The "JPEG" check however makes sense because this technique would completely break images with transparent backgrounds (by turning all transparent pixels to pitch black).
I suspect that most images loaded in apps built with Next do not have transparency in them, so it would be worth fixing the feathered edges issue. Image-heavy websites will look much better. Especially when libraries like "lqip-modern" or "plaiceholder" output WEBP placeholders by default.
I've already found a possible solution to this issue by updating the underlying SVG filter. Here's a little demo of the filter that works for any type of image no matter if it has transparenct pixels or not:
(placeholder image, current blur technique, my solution) Image with transparency:
Image without transparency
I'll submit a PR shortly so pls tag me as an assignee 🤓
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
Image optimization (next/image, next/legacy/image)
Link to the code that reproduces this issue or a replay of the bug
https://codesandbox.io/p/sandbox/competent-agnesi-sw4tsq?file=%2Fpages%2Findex.tsx%3A30%2C9
To Reproduce
Describe the Bug
When placeholder image file type is different than JPEG, placeholder images have feathered / washed out edges around them:
Expected Behavior
Placeholder images should keep hard/solid edges around them no matter what type of file extensions is used for the placeholder image (JPEG, JPG, GIF, WEBP).
Here's a comparison between how it is now, and how it could be when fixed. Having hard edges around the image makes UI look crispier.
Feathered edges (current state):
Hard edges (expected):
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response