Image component change animated files to static ones

[jukialen]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

'yarn' is not recognized as an internal or external command,
operable program or batch file.
'pnpm' is not recognized as an internal or external command,
operable program or batch file.

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 14.18.1
  npm: 7.20.3
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.0
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

All main web browsers except Safari (I don't have Safari).

How are you deploying your application? (if relevant)

No response

Describe the Bug

I have a component for animited photos and I use . When this one show animated photo, I have static one, but when I change on , the files are animited (e. g. eyes are moving).

For example: https://pronama.jp/images/animated.png

Expected Behavior

When Image get animited files (apng, gif or animited webp and avif), Image should know this isn't static photo, yet animited one, so files should move. That files should be converting to avif or webp when web browser support that formats, especially gif format.

Gif format must be converted to avif, webp or apng format by the performance of that format.

To Reproduce

I change to img tag: it work.
I added "unoptimized": it work too.
I added Image without unoptimized: it doesn't work.

I wanted to add apng or gif format in next.config file, but I get the same errors:"
Error: Specified images.formats must be length 1 or 2, received length (3), please reduce the length of the array to continue.

or

Error: Specified images.formats should be an Array of mime type strings, received invalid values (image/apng).
"
"image/apng" is in headers request.

My components for images: https://github.com/jukialen/portal_for_artists_in_next/blob/main/components/atoms/Photos/Photos.tsx
My next.config:
https://github.com/jukialen/portal_for_artists_in_next/blob/main/next.config.js

[styfle]

We normally detect animated images and bypass optimization.

This will be fixed in PR #35120 so you won't need to add unoptimized prop anymore, thanks!

[styfle]

The fix is available on the canary channel.

You can try it out with npm i next@canary or yarn add next@canary, thanks!

[jukialen]

We normally detect animated images and bypass optimization.

This will be fixed in PR #35120 so you won't need to add unoptimized prop anymore, thanks!

What animation file formats are supported?

[styfle]

Next.js will automatically detect gif, apng, webp via is-animated

However, if you know an image is animated its probably best to explicitly set the unoptimized prop.

[Yuripetusko]

Hm we tested the canary version and apng are still not animated unless we explicitly set unoptimized

[nikitindiz]

Hm we tested the canary version and apng are still not animated unless we explicitly set unoptimized

next@canary

https://github.com/nikitindiz/nextjs-apng-bug

https://nextjs-apng-bug.vercel.app/

Left one - optimized, both images should be animated.

[styfle]

Thanks for reporting! It looks likes it working with next start but not on Vercel deployments. We'll get that fixed shortly 👍

In the meantime, manually setting the unoptimized prop is the best workaround.

[jukialen]

Next.js will automatically detect gif, apng, webp via is-animated

However, if you know an image is animated its probably best to explicitly set the unoptimized prop.

I did this and it work, but good is hear that it will have is-animated.

[jukialen]

@styfle When I had canary version, I had to use unoptimized in order to it work (not only first next start), so this isn't problem in the Vercel.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.