Skip to content

Add next/image docs section for animated images#35123

Merged
kodiakhq[bot] merged 4 commits intocanaryfrom
next-image-docs-animated
Mar 8, 2022
Merged

Add next/image docs section for animated images#35123
kodiakhq[bot] merged 4 commits intocanaryfrom
next-image-docs-animated

Conversation

@styfle
Copy link
Copy Markdown
Contributor

@styfle styfle commented Mar 7, 2022

Comment thread docs/api-reference/next/image.md Outdated

The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve it as-is, since converting all the frames of an animated image on-demand is too slow.

Auto-detection for animated files is best-effort and supports GIF, APNG, and WebP. If you want to explicitly bypass Image Optimization for a given animated image, use the [unoptimized](#unoptimized) prop.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does best effort mean here? Does it look at the file extension? How would it fail?

Copy link
Copy Markdown
Contributor Author

@styfle styfle Mar 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The buffer is analyzed using is-animated package which returns true/false. If it returns true, then we bypass. If it returns false, then we optimize the image.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is interesting, i didnt know that we dont optimize animated images. So a site with lots of GIFs wont benefit from our optimizations

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In most cases, animated images are not source images. Instead, they are typically exported from some other source such as a video. Most tools that export to animated gif offer a compression option so theres very few cases where a user would even want to optimize an animated image anyway (so far no one has requested it).

Co-authored-by: Lee Robinson <me@leerob.io>
@styfle styfle requested review from balazsorban44 and leerob March 7, 2022 23:47
@kodiakhq kodiakhq Bot merged commit f8a2350 into canary Mar 8, 2022
@kodiakhq kodiakhq Bot deleted the next-image-docs-animated branch March 8, 2022 18:42
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Apr 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

created-by: Next.js team PRs by the Next.js team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants