lovell / sharp

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
https://sharp.pixelplumbing.com
Apache License 2.0
29.38k stars 1.3k forks source link

WebP Resize Transparency Artifacting #3869

Closed night closed 1 year ago

night commented 1 year ago

Possible bug

A user reported that their image resize had artifacting in it. It appears that certain WebP resulting images may have artifacting in transparent regions. Resizing as GIF doesn't seem to produce the same effect. Unsure if this is an upstream issue, and I couldn't spot an issue in the source image that would cause this behavior.

Is this a possible bug in a feature of sharp, unrelated to installation?

Are you using the latest version of sharp?

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (8) x64 Intel(R) Xeon(R) Platinum 8358 CPU @ 2.60GHz
    Memory: 6.87 GB / 15.62 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.17.1 - /usr/bin/node
    npm: 9.6.7 - /usr/bin/npm
  npmPackages:
    sharp: ^0.32.6 => 0.32.6 

What are the steps to reproduce?

Resizing the specific attached image results in artifacting of the top few pixels on the resulting image.

What is the expected behaviour?

Resizing this image should not result in artifacting of the top few pixels on the resulting image.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

sharp('/path/to/image', {
  animated: true,
})
    .rotate()
    .resize(112, 112)
    .webp({
      nearLossless: true,
    })
    .toFile('/path/to/outputImage');

Configuring lossless vs nearLossless vs no compression doesn't seem to help.

Please provide sample image(s) that help explain this problem

example_images.zip

I provided the input image and example output GIF and WebP results I'm seeing.

lovell commented 1 year ago

This looks like frame bleed - did you see https://github.com/lovell/sharp/issues/3806?

night commented 1 year ago

Changing the resize kernel seems to have helped. Thanks!