fetch(next/image): reduce maximumResponseBody from 300MB to 50MB (#88588)

Based on our metrics, the P99.9 for a source image is 47 MB so we can
adjust the default setting to be much lower (by changing from from 300
MB to 50 MB) in favor of reducing memory.

Author: styfle

docs/01-app/03-api-reference/02-components/image.mdx

@@ -839,22 +839,22 @@ module.exports = {
 
 #### `maximumResponseBody`
 
-The default image optimization loader will fetch source images up to 300 MB in size.
+The default image optimization loader will fetch source images up to 50 MB in size.
 
 ```js filename="next.config.js"
 module.exports = {
   images: {
-    maximumResponseBody: 300_000_000,
+    maximumResponseBody: 50_000_000,
   },
 }
 ```
 
-If you know all your source images are small, you can protect memory constrained servers by reducing this to a smaller value such as 50 MB.
+If you know all your source images are small, you can protect memory constrained servers by reducing this to a smaller value such as 5 MB.
 
 ```js filename="next.config.js"
 module.exports = {
   images: {
-    maximumResponseBody: 50_000_000,
+    maximumResponseBody: 5_000_000,
   },
 }
 ```

packages/next/src/shared/lib/image-config.ts

@@ -150,7 +150,7 @@ export const imageConfigDefault: ImageConfigComplete = {
   minimumCacheTTL: 14400, // 4 hours
   formats: ['image/webp'],
   maximumRedirects: 3,
-  maximumResponseBody: 300_000_000, // 300MB
+  maximumResponseBody: 50_000_000, // 50 MB
   dangerouslyAllowLocalIP: false,
   dangerouslyAllowSVG: false,
   contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,

test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts

@@ -98,7 +98,7 @@ function runTests(mode: 'dev' | 'server') {
             },
           ],
           maximumRedirects: 3,
-          maximumResponseBody: 300000000,
+          maximumResponseBody: 50000000,
           minimumCacheTTL: 14400,
           path: '/_next/image',
           qualities: [75],

test/integration/next-image-new/app-dir-qualities/test/index.test.ts

@@ -110,7 +110,7 @@ function runTests(mode: 'dev' | 'server') {
             },
           ],
           maximumRedirects: 3,
-          maximumResponseBody: 300000000,
+          maximumResponseBody: 50000000,
           minimumCacheTTL: 14400,
           path: '/_next/image',
           qualities: [42, 69, 88],

test/integration/next-image-new/app-dir/test/index.test.ts

@@ -1796,7 +1796,7 @@ function runTests(mode: 'dev' | 'server') {
             },
           ],
           maximumRedirects: 3,
-          maximumResponseBody: 300000000,
+          maximumResponseBody: 50000000,
           minimumCacheTTL: 14400,
           path: '/_next/image',
           qualities: [75],

test/integration/next-image-new/unicode/test/index.test.ts

@@ -103,7 +103,7 @@ function runTests(mode: 'server' | 'dev') {
             },
           ],
           maximumRedirects: 3,
-          maximumResponseBody: 300000000,
+          maximumResponseBody: 50000000,
           minimumCacheTTL: 14400,
           path: '/_next/image',
           qualities: [75],

test/integration/next-image-new/unoptimized/test/index.test.ts

@@ -118,7 +118,7 @@ function runTests(url: string, mode: 'dev' | 'server') {
             },
           ],
           maximumRedirects: 3,
-          maximumResponseBody: 300000000,
+          maximumResponseBody: 50000000,
           minimumCacheTTL: 14400,
           path: '/_next/image',
           qualities: [75],

test/unit/image-optimizer/fetch-external-image.test.ts

@@ -19,7 +19,7 @@ describe('fetchExternalImage', () => {
       const error = await fetchExternalImage(
         'http://example.com/no-body.jpg',
         false,
-        300_000_000
+        50_000_000
       ).catch((e) => e)
 
       expect(error).toBeInstanceOf(ImageError)