Skip to content

Astro converts looping animated gifs into non-looping webp #13683

@altano

Description

@altano

Astro Info

Astro                    v5.7.4
Node                     v22.14.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             astro-expressive-code
                         @astrojs/mdx
                         @astrojs/sitemap
                         astro-icon
                         @altano/astro-opengraph
                         astro-typed-links
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

all browsers

Describe the Bug

I noticed that the infinitely-looping animated gifs on my site were being converted to webp animations, and it worked well except that the animations would pause after 1 loop. It would not loop infinitely.

I determined that the webp animations loop infinitely in dev ssg builds but NOT production ssg builds. I wanted to make sure it was the actual webp file problem's fault and not my browser so I investigated further and:

  • The webp spec has an ANIM header definition
  • The loop count is: "16 bits (uint16) - The number of times to loop the animation. If it is 0, this means infinitely."
  • In a dev build, my gif is converted to a webp with a loop count integer of 0. it loops infinitely.
  • in prod build, the loop count is 1. it does NOT loop after finishing.
  • In a hex editor, I changed the webp's loop count from "1" to "0" and it started looping infinitely.

I'm not sure what the bug is here, and why it's different between dev and prod. But I have absolutely no changes to the default image service, which I assume is sharp. I did find this animated: true option you can pass to the webp converter so perhaps that's something we need to add for .gif files.

What's the expected result?

I would expect my gifs to loop infinitely, restarting when they reach the end. I am attaching a zip file with 4 images:

1 - this is the original gif ✅
2 - dev mode output from Astro. works great ✅
3 - prod mode output from Astro. does not loop ❌
4 - prod mode output that I've edited in a hex editor to change loop count to 0. works great ✅

images.zip

Link to Minimal Reproducible Example

stackblitz doesn't allow file upload, so I can't repro there

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

Labels

- P3: minor bugAn edge case that only affects very specific usage (priority)feat: assetsRelated to the Assets feature (scope)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions