Skip shrink-on-load when resizing animated WebP input

[N1ades]

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?
yes

What is the expected behaviour?
correct output

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?
https://codesandbox.io/s/2-drk7e?file=/src/server.js

Are you able to provide a sample image that helps explain the problem?
any animated image (gif, webp, apng)

What is the output of running npx envinfo --binaries --system?

System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 7.61 GB / 62.73 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm

[lovell]

As you've seen, you'll need to update the output with the new page height when resizing a multi-page image.

.webp({ pageHeight: ... })

https://sharp.pixelplumbing.com/api-output#webp

Please see #2275 for a future possible enhancement that relates to this.

[N1ades]

@lovell, Thank you for your reply. I added this parameter, but it doesn't work in all cases. There are 2 examples in the sandbox where everything works and 2 examples where the image breaks. I am unable to establish the reason for this. The only thing I noticed is that the size of the output buffer is very different from the working example.

https://codesandbox.io/s/2-drk7e?file=/src/sharp/examples.js

[lovell]

The output looks as-expected to me. Example 1 is using fit=fill, which ignores aspect ratio, and is reducing the width but keeping the height the same.

https://sharp.pixelplumbing.com/api-resize

[N1ades]

@lovell, I have simplified the example for clarity. https://codesandbox.io/s/2-drk7e?file=/src/sharp/examples.js

You can see that at values of height from 47 pixels to 56 pixels, the image breaks, but before and after all the images are normal.

I used one code for all pictures.
I tried using other values for "fit", but I was able to achieve a working result only with the value "fill"

const width = 100
const s = sharp(imageBuf, { animated: true });
const metadata = await s.metadata();
const height = pageHeight * metadata.pages; // calculate the sum of heights

const result = await s
    .resize({ width, height, fit: "fill" })
    .webp({ pageHeight })
    .toBuffer();

This is as it should be, is it my mistake or a mistake in the library?
How can I resize the animated picture to {height: 56, width: 100}, to keep the original aspect ratio?

[lovell]

Please can you try setting the fastShrinkOnLoad option to false

.resize({ width, height, fit: "fill", fastShrinkOnLoad: false })

https://sharp.pixelplumbing.com/api-resize

[N1ades]

@lovell, It works, thanks

[lovell]

Thanks for confirming. Commit 5bd5e50 makes this the default behaviour for animated WebP images. I'll re-open this issue until it's released.