-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Image component change animated files to static ones #34807
Comments
We normally detect animated images and bypass optimization. This will be fixed in PR #35120 so you won't need to add |
- Fixes #34807 - Related commit qzb/is-animated@69dad3c Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
The fix is available on the canary channel. You can try it out with |
What animation file formats are supported? |
Next.js will automatically detect gif, apng, webp via However, if you know an image is animated its probably best to explicitly set the |
Hm we tested the |
next@canary https://github.com/nikitindiz/nextjs-apng-bug https://nextjs-apng-bug.vercel.app/ Left one - optimized, both images should be animated. |
Thanks for reporting! It looks likes it working with In the meantime, manually setting the |
I did this and it work, but good is hear that it will have is-animated. |
@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. |
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. |
Verify 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.
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
The text was updated successfully, but these errors were encountered: