Skip to content
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.

Sign up for GitHub

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

Jump to bottom

<Image /> placeholder image appears "washed out" due to feathered edges #52548

Closed
1 task done
arturbien opened this issue Jul 11, 2023 · 2 comments · Fixed by #52583
Closed
1 task done

<Image /> placeholder image appears "washed out" due to feathered edges #52548

arturbien opened this issue Jul 11, 2023 · 2 comments · Fixed by #52583
Assignees
@arturbien
Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization. locked

Comments

@arturbien
Copy link
Contributor

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:19 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6020
    Binaries:
      Node: 19.7.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.10-canary.3
      eslint-config-next: 13.0.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.3
    Next.js Config:
      output: N/A

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

  • Open DevTools network tab,
  • Check the "disable cache" checkbox,
  • Set network throttling to "Slow 3G",
  • Click "Refresh" button in Codesandbox and wait for placeholder images to show up

Describe the Bug

When placeholder image file type is different than JPEG, placeholder images have feathered / washed out edges around them:

Screenshot 2023-07-11 at 14 30 45

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):
Screenshot 2023-07-11 at 14 36 36

Hard edges (expected):
Screenshot 2023-07-11 at 14 36 47

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@arturbien arturbien added the bug Issue was opened via the bug report template. label Jul 11, 2023
@github-actions github-actions bot added the Image (next/image) Related to Next.js Image Optimization. label Jul 11, 2023
@arturbien
Copy link
Contributor Author

I've already investigated the issue and I've found the line that causes it:

https://github.com/vercel/next.js/blob/56fcd7ac33e700236e6a37a8dac5ed9c378e0823/packages/next/src/shared/lib/image-blur-svg.ts#L22C1-L24C9

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).

Why fixing this is important

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.

Solution

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:
Screenshot 2023-07-11 at 15 05 43
Image without transparency
Screenshot 2023-07-11 at 15 07 31

I'll submit a PR shortly so pls tag me as an assignee 🤓

@arturbien arturbien mentioned this issue Jul 12, 2023
Merged
styfle added a commit that referenced this issue Jul 26, 2023
@arturbien @styfle
fix(next/image): washed out blur placeholder (#52583)
7160af3 
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>
kwonoj pushed a commit that referenced this issue Jul 26, 2023
@arturbien @styfle @kwonoj
fix(next/image): washed out blur placeholder (#52583)
7a15a23 
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>
rfearing pushed a commit to rfearing/next.js that referenced this issue Jul 26, 2023
@arturbien @styfle @rfearing
fix(next/image): washed out blur placeholder (vercel#52583)
6c6a14c 
Fixes vercel#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>
Strift pushed a commit to Strift/next.js that referenced this issue Jul 27, 2023
@arturbien @styfle @Strift
fix(next/image): washed out blur placeholder (vercel#52583)
8dc7bc1 
Fixes vercel#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>
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@arturbien arturbien

Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization. locked
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(next/image): washed out blur placeholder arturbien/next.js
1 participant
@arturbien