How to resize animated webp/gif?

[luizbim]

Hi guys, I'm trying to resize an animated webp but no success.
I saw today that some new API calls are being developed, but I thought that the animated resizing functionality already works in some way.

A little sample code:

      sharp("originalFilePath.webp", { animated: true })
        .resize({
          width: 200,
          height: 200,
        })
        .webp({
          pageHeight: 200,
          loop: 0,
          delay: 130,
          force: true,
        })
        .toFile("resizedFilePath.webp", (err, info) => {
          if (err) {
            console.error(err);
          }
         console.log('file resized')
        });

My objective is to resize and convert animated images back and forth using webp and gif extensions to accomplish a more cheaper bandwidth cost for my current project.

Thank you in advance for your time.

[lovell]

Hi, if you're resizing n pages at once you'll need to set the height to a multiple of n:

  .resize({
-    width: 200,
+    width: 200 * n,
    height: 200,
  })

[luizbim]

I've tried that, but the animation changed completely. The result is the first page moving from down to top.

[lovell]

Sorry, I got width and height the wrong way round in the diff, it should be:

  .resize({
    width: 200,
-   height: 200,
+   height: 200 * n,
  })

[luizbim]

Yeah, I've noticed that but the result is the same.

[lovell]

You're probably seeing the effects of rounding "errors" at the top and bottom of each page/frame, which is pretty much why #2275 exists as a future possible enhancement.

Are you able to provide a sample input file? You'll probably only get any success when resizing to exactly 1/2 or 1/4 etc. of the original dimensions as things stand.

[luizbim]

I've noticed that if the new size is below 50% the glitch appears. Above 50% the image is resized correctly.

The Image is here

[luizbim]

Also, for some reason resized images are heavier than the original.
Original:

• 512x512: 32k

Resized:

• 512x512: 60k
• 300x300: 92k
• 256x256: 68k

[lovell]

Please subscribe to #2275 for updates.

[luizbim]

Ok, thank you very much @lovell.

[KishorJena]

is the problem solved?