7160af3dba
Fixes #52548 This PR fixes the issue of the `<Image />` "blur" placeholder where the placeholder image appears "washed out" and feathered around the edges. The fix does NOT involve any API changes - only the underlying SVG filter is updated. The filter works for any image type (JPEG, GIF, WEBP) no matter if it contains transparency or not. ## How it works ```html <filter id='b' color-interpolation-filters='sRGB'> <feMorphology in='SourceAlpha' operator='dilate' radius='15' result='dilate' /> <feGaussianBlur in='dilate' stdDeviation='15' result='mask' /> <feGaussianBlur in='SourceGraphic' stdDeviation='20' result='blur' /> <feComponentTransfer in='blur' result='solid'> <feFuncA type='table' tableValues='1 1' /> </feComponentTransfer> <feComposite in2='mask' in='solid' operator='in' result="comp" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="comp" /> </feMerge> </filter> ``` Currently the underlying filter uses `feComponentTransfer ` to get rid of the feathered edges but only for JPEG images. This is because if alpha channel was to be mapped to 1 for images with transparency in it, all of the transparent pixels would turn black (which is obviously undesirable). The way I fixed it is by creating a mask from the SourceAlpha (effectively the "shape" of the object in an image), slightly blurring it for a smoother look (feMorphology + feGaussianBlur), and then clipping the `feComponentTransfer` result to the shape of the mask (`<feComposite in2='mask' in='solid' operator='in' result="comp" />`). Then finally `feMerge` is used to stack original image and the clipping result from the previous step just to make sure that any left over artifacts from clipping are hidden. ## Result Here's a comparison between the current implementation (left column), and the filter above (right column) <img width="614" alt="Screenshot 2023-07-12 at 10 44 56" src="https://github.com/vercel/next.js/assets/28541613/afdc1f88-eb1a-4a21-a88a-06057a875e1b"> --------- Co-authored-by: Steven <steven@ceriously.com> |
||
|---|---|---|
| .. | ||
| .stats-app | ||
| __mocks__ | ||
| development | ||
| e2e | ||
| examples | ||
| integration | ||
| lib | ||
| production | ||
| unit | ||
| .gitignore | ||
| jest-setup-after-env.ts | ||
| jest.d.ts | ||
| readme.md | ||
| test-file.txt | ||