Animated Images Support

[dli7319]

Currently, animated images (WebP, GIF) are turned into static images.

Based on https://sharp.pixelplumbing.com/api-constructor, it looks like animated images support could be enabled by simply adding { animated: true } to

next-image-export-optimizer/src/optimizeImages.js

Line 417 in ddb110c

const transformer = sharp(imageBuffer);

It would be awesome if this functionality could be exposed through an environment variable.

Note that next/image claims to bypass animated images.

[david-zacharias]

Decision could also be made based on the source image extension (as read in L331) , to set {animated: true } for webP, GIF only

[Niels-IO]

Hi @david-zacharias @dli7319,
I have created a PR #98 which shows how to include animated images with the unoptimized prop. The key is to not store the images in the image folder in which next-image-export-optimizer is looking.

I also played around with the animated option in sharp, but the images always come out static. Feel welcome to try your luck; I haven't found a way to optimize the animated images in size (and neither does Next.js)

[dli7319]

Thanks for the example of using unoptimized.

In my own experiments, adding animated to your code seems to work perfectly, albeit with very slow performance:
dli7319@8741983
The 64 MB GIF gets converted properly into smaller animated WebP images

E.g. 720p_gif-opt-750.WEBP

Nevertheless, it would also be nice if unoptimized could be automatically applied for animated images like in next.js in case someone doesn't want animated images to be optimized:
https://github.com/vercel/next.js/blob/1c5983fe95b79cc9ea1e52d19e69adf7827eda5a/packages/next/src/server/image-optimizer.ts#L589

[Niels-IO]

Interesting that it works for you. When I only change this line in the code

const transformer = sharp(imageBuffer, { animated: true });

the generated image is not animated anymore. Did you do something else that I am missing?

Regarding your second point: The unfortunate thing is that the isAnimated package is a server package and on the client side where I would need to set the unoptimized prop, we cannot run such a check.

[dli7319]

I put all the changes I made in that commit and just ran optimize_gif.sh so I have no idea why it wouldn't work for you as well.
Sharp is installed from npm ci so it should match the version in your package-lock.json.
FWIW, I'm testing on Ubuntu 22.04 and node v18.12.1.

[dli7319]

I just tested using your static noise gif and animated png (dli7319@39af8a6).
The noise GIF works: https://raw.githubusercontent.com/dli7319/next-image-export-optimizer/39af8a663e0b14960296c07c2cbdfd15691c4c13/public/images/nextImageExportOptimizer/402107790_STATIC_NOISE-opt-256.WEBP
The animated PNG becomes static: https://raw.githubusercontent.com/dli7319/next-image-export-optimizer/39af8a663e0b14960296c07c2cbdfd15691c4c13/public/images/nextImageExportOptimizer/animated-opt-256.WEBP

[Niels-IO]

Thanks, I just came to the same conclusion. I was irritated as the webp version did not animate in the file preview, but they do in the browser.
Also, the WEBP animated image works. The issue with the apng seems to be described here: lovell/sharp#2375