Blur placeholder of `next/image` is still visible after the image is loaded

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: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.6.0
      npm: 8.13.2
      Yarn: 1.22.18
      pnpm: 8.6.7
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: 13.4.9
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    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/pensive-mccarthy-yfz9lg

To Reproduce

• Use next/image to load an image that has a transparent background.
• Set a placeholder="blur" on such image.
• Check your app: the image blur won't be removed immediately after the image has been loaded. This makes the blurry image visible underneath the loaded image (since it has a transparent background).

Describe the Bug

The image/style generated by setting placeholder="blur" on a next/image can still be seen (for some time) after the image has been loaded.

Example from the attached Codesandbox:

You can see other people reporting and discussing this bug at https://github.com/vercel/next.js/issues/42140#issuecomment-1342533513 .

For reference, here's how a Gatsby image with blur setup looks like out-of-the box:

https://github.com/vercel/next.js/assets/9536354/3484be15-066e-4ad0-9eef-4fd7c0c238a0

Expected Behavior

The placeholder image/style should immediately disappear when the image is loaded. Or, the generated image placeholder should respect the transparency pixels of the used image.

Which browser are you using? (if relevant)

Chromium Engine Version 115.0.5790.114, Safari Version 16.5.2 (18615.2.9.11.10)

How are you deploying your application? (if relevant)

No response

_NEXT-1679

Start with the linked CodeSandbox and reproduce the issue using next/image with placeholder="blur" and a transparent image. Compare the behavior with the expected result: the blur placeholder should disappear immediately after the image loads, without remaining visible through transparent pixels.