Gif resize produces weird height

[isaacfink]

Question about an existing feature

What are you trying to achieve?

I am trying to create a gif by using an existing gif and compositing an svg on top of it, the issue is that the original gif (and bty extension the generated gif) is not resizing the height properly, I am resizing based on an aspect ratio like this

sharpImage = sharp(Buffer.from(imageBuffer), { animated: true });
sharpImage = sharpImage.gif({loop:0, });

sharpImage.resize({
    height: Math.ceil(1080 * aspectRatio),
    width: 1080
});

console.log(await sharpImage.metadata());

The log is:

width: 600,
height: 59488,

the aspectRatio is around 0.56333.... so this number for height does not make sense, am I doing something wrong here?

When you searched for similar issues, what did you find that might be related?

I searched for similar issues and from what I could tell at one point I was supposed to set pageSize but there is nothing in the documentation for this and I have tried resizing the gif at every step with no success

https://github.com/lovell/sharp/issues/1961

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

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

[isaacfink]

sample gif https://jjalgmteqvlqsqkiewha.supabase.co/storage/v1/object/sign/background-files/5a574f15-24a7-4c07-bfeb-93e14b27180cezgif.com-video-to-gif.gif?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJiYWNrZ3JvdW5kLWZpbGVzLzVhNTc0ZjE1LTI0YTctNGMwNy1iZmViLTkzZTE0YjI3MTgwY2V6Z2lmLmNvbS12aWRlby10by1naWYuZ2lmIiwiaWF0IjoxNjkxMzI4ODI1LCJleHAiOjE2OTE5MzM2MjV9.qR3h7VcMIT5RXpn1od_rf-kU7N0Ts4X7RMK-hrDqIpc&t=2023-08-06T13%3A33%3A45.155Z

[lovell]

Did you see https://sharp.pixelplumbing.com/api-input#metadata ?

This is read from the header of the input image. It does not take into consideration any operations to be applied to the output image, such as resize or rotate.

The height refers to the total height of all pages/frames. Perhaps you meant to use the pageHeight property?

[isaacfink]

@lovell that makes sense, I will have to test it tomorrow thanks

[lovell]

@isaacfink Were you able to make any progress with this?

[lovell]

Closing due to inactivity but please feel free to reopen with more details if further help is required.

[pooledge]

We experience this issue using PayloadCMS which in its turn uses sharp for image processing.

From our observations, the height is a multiplication of single frame height and quantity of frames, e.g.: 1600x1200 original GIF with 14 frames results in a filename ...-1600x16800.gif

The target file dimension is correct though, it's just the file name that is weird.

[lovell]

@pooledge "it's just the file name that is weird" sounds like a Payload bug/feature. Perhaps you could report this downstream.

[pooledge]

Will do. My first (superficial) assumption was that they are getting the file name from sharp.