fix: skip resizing image if it's animated

packages/next/server/image-optimizer.ts

@@ -4,7 +4,6 @@ import { promises } from 'fs'
 import { getOrientation, Orientation } from 'next/dist/compiled/get-orientation'
 import imageSizeOf from 'next/dist/compiled/image-size'
 import { IncomingMessage, ServerResponse } from 'http'
-// @ts-ignore no types for is-animated
 import isAnimated from 'next/dist/compiled/is-animated'
 import contentDisposition from 'next/dist/compiled/content-disposition'
 import { join } from 'path'
@@ -726,7 +725,9 @@ export async function resizeImage(
   extension: 'avif' | 'webp' | 'png' | 'jpeg',
   quality: number
 ): Promise<Buffer> {
-  if (sharp) {
+  if (isAnimated(content)) {
+    return content
+  } else if (sharp) {
     const transformer = sharp(content)
 
     if (extension === 'avif') {

packages/next/types/misc.d.ts

@@ -367,3 +367,7 @@ declare module 'next/dist/compiled/watchpack' {
 
   export default Watchpack
 }
+
+declare module 'next/dist/compiled/is-animated' {
+  export default function isAnimated(buffer: Buffer): boolean
+}

test/production/skip-animated-image-import-resize/index.test.ts

@@ -0,0 +1,20 @@
+import { createNext, FileRef } from 'e2e-utils'
+import path from 'path'
+
+describe('Skip animated image import resize', () => {
+  it('should build with', async () => {
+    const next = await createNext({
+      files: {
+        'pages/index.js': `
+        import Image from 'next/image'
+        import cat from '../public/cat.webp'
+        export default function Home() {
+            return <Image src={cat} alt="cat" />
+        }`,
+        'public/cat.webp': new FileRef(path.join(__dirname, 'cat.webp')),
+      },
+    })
+    expect(true).toBe(true)
+    await next.destroy()
+  })
+})