Skip to content

Astro doesn't support a looping AVIF image in markdown #16267

@thibaultamartin

Description

@thibaultamartin

Astro Info

Astro                    v6.1.2
Vite                     v7.3.1
Node                     v22.22.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap (v3.7.2)
                         astro-expressive-code (v0.41.7)

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

No response

Describe the Bug

I have a content collection and /blog/[id].astro page for blog posts. The content collection takes markdown and turns it into a blog post.

I usually only embed PNGs in my markdown since Astro automatically optimizes those images as webp.

I needed to embed a looping AVIF image into a blog post, and astro errored out at build time with

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

CouldNotTransformImage: Could not transform image `/_astro/typst-live-preview.Dwq1fXl4.avif`. See the stack trace for more information.
    at generateImageInternal (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:173:21)
    at async generateImage (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:69:28)
    at async generateImagesForPath (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:53:5)
    at async file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/p-queue@9.1.0/node_modules/p-queue/dist/index.js:394:36 {
  loc: undefined,
  title: 'Could not transform image.',
  hint: 'This is often caused by a corrupted or malformed image. Re-exporting the image from your image editor may fix this issue.',
  frame: undefined,
  type: 'AstroError',
  [cause]: Error: Input buffer contains unsupported image format
      at Sharp.metadata (/var/home/thib/Projects/ergaster.org/node_modules/.pnpm/sharp@0.34.5/node_modules/sharp/lib/input.js:637:17)
      at Object.transform (file:///var/home/thib/Projects/ergaster.org/dist/.prerender/chunks/sharp_BaUVXCPR.mjs:89:37)
      at generateImageInternal (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:164:45)
      at async generateImage (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:69:28)
      at async generateImagesForPath (file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/astro@6.1.2_@types+node@24.12.0_rollup@4.59.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/dist/assets/build/generate.js:53:5)
      at async file:///var/home/thib/Projects/ergaster.org/node_modules/.pnpm/p-queue@9.1.0/node_modules/p-queue/dist/index.js:394:36
}

Node.js v22.22.0
 ELIFECYCLE  Command failed with exit code 1.

When I open the AVIF file directly in Firefox, I can see it and it loops properly.

Github and Stackblitz won't let me upload the AVIF file I've used, but I'll happily share it with anyone who needs it to reproduce.

What's the expected result?

I would expect Astro to ignore the image it can't optimize and embed it as it is.

Link to Minimal Reproducible Example

As said in description, neither GH nor Stackblitz will let me upload the AVIF that causes issues.

Participation

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P3: minor bugAn edge case that only affects very specific usage (priority)pkg: astroRelated to the core `astro` package (scope)

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions