diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
index 4280a0edfd90f..5644e7d039f85 100644
--- a/packages/next/server/image-optimizer.ts
+++ b/packages/next/server/image-optimizer.ts
@@ -498,7 +498,7 @@ function parseCacheControl(str: string | null): Map<string, string> {
  * it matches the "magic number" of known file signatures.
  * https://en.wikipedia.org/wiki/List_of_file_signatures
  */
-function detectContentType(buffer: Buffer) {
+export function detectContentType(buffer: Buffer) {
   if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
     return JPEG
   }
diff --git a/test/integration/image-optimizer/test/detect-content-type.test.js b/test/integration/image-optimizer/test/detect-content-type.test.js
new file mode 100644
index 0000000000000..3902daf1c1fbb
--- /dev/null
+++ b/test/integration/image-optimizer/test/detect-content-type.test.js
@@ -0,0 +1,25 @@
+/* eslint-env jest */
+import { detectContentType } from '../../../../packages/next/dist/server/image-optimizer.js'
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+
+const getImage = (filepath) => readFile(join(__dirname, filepath))
+
+describe('detectContentType', () => {
+  it('should return jpg', async () => {
+    const buffer = await getImage('../public/test.jpg')
+    expect(detectContentType(buffer)).toBe('image/jpeg')
+  })
+  it('should return png', async () => {
+    const buffer = await getImage('../public/test.png')
+    expect(detectContentType(buffer)).toBe('image/png')
+  })
+  it('should return webp', async () => {
+    const buffer = await getImage('../public/animated.webp')
+    expect(detectContentType(buffer)).toBe('image/webp')
+  })
+  it('should return svg', async () => {
+    const buffer = await getImage('../public/test.svg')
+    expect(detectContentType(buffer)).toBe('image/svg+xml')
+  })
+})