Change AVIF to opt-in via configuration

[styfle]

AVIF (shown in purple) is generally slower to encode than WebP (shown in yellow) so it is probably not a good default for on-demand Image Optimization.

Instead, we'll let users opt-in via formats configuration.

[ijjk]

Failing test suites

Commit: 4a4d7b5

test/production/required-server-files.test.ts

• should set-up next > should bubble error correctly for gip page
• should set-up next > should bubble error correctly for gssp page

Expand output

● should set-up next › should bubble error correctly for gip page

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

  580 |     const res = await fetchViaHTTP(appPort, '/api/error')
  581 |     expect(res.status).toBe(500)
> 582 |     expect(await res.text()).toBe('error')
      |                          ^
  583 |     expect(errors.length).toBe(1)
  584 |     expect(errors[0]).toContain('some error from /api/error')
  585 |   })

  at Object.<anonymous> (production/required-server-files.test.ts:582:26)

● should set-up next › should bubble error correctly for gssp page

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 2

  592 |       {
  593 |         headers: {
> 594 |           'x-matched-path': '/optional-ssp/[[...rest]]',
      |                           ^
  595 |         },
  596 |       }
  597 |     )

  at Object.<anonymous> (production/required-server-files.test.ts:594:27)

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
buildDuration	13.7s	13.6s	-53ms
buildDurationCached	3s	3.1s	⚠️ +173ms
nodeModulesSize	196 MB	196 MB	-65 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.065	3.211	⚠️ +0.15
/ avg req/sec	815.6	778.55	⚠️ -37.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.458	1.628	⚠️ +0.17
/error-in-render avg req/sec	1714.82	1536.01	⚠️ -178.81

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
651.cd440d20..0b23.js gzip	2.96 kB	2.96 kB	✓
831.695e33f6..205f.js gzip	179 B	179 B	✓
framework-89..a097.js gzip	42.2 kB	42.2 kB	✓
main-167207f..648c.js gzip	26.1 kB	26.1 kB	✓
webpack-f09b..493e.js gzip	1.47 kB	1.47 kB	✓
Overall change	72.9 kB	72.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
_app-9fb8765..c13d.js gzip	979 B	979 B	✓
_error-d828d..2954.js gzip	3.06 kB	3.06 kB	✓
amp-5388d1f5..4ce9.js gzip	551 B	551 B	✓
css-10424225..367a.js gzip	329 B	329 B	✓
dynamic-9821..3cd4.js gzip	2.67 kB	2.67 kB	✓
head-1df323b..d261.js gzip	2.32 kB	2.32 kB	✓
hooks-ab0016..b093.js gzip	917 B	917 B	✓
image-a30860..3c27.js gzip	5.85 kB	5.84 kB	-6 B
index-95c8cb..6970.js gzip	260 B	260 B	✓
link-05c99e7..35ec.js gzip	1.66 kB	1.66 kB	✓
routerDirect..6659.js gzip	319 B	319 B	✓
script-d94ba..ed05.js gzip	386 B	386 B	✓
withRouter-7..8b2e.js gzip	317 B	317 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	19.7 kB	19.7 kB	-6 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
_buildManifest.js gzip	460 B	458 B	-2 B
Overall change	460 B	458 B	-2 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
index.html gzip	537 B	537 B	✓
link.html gzip	548 B	548 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-a9a93d991a2a6a9c.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e040764724fe6a41.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-465e164f10b333ba.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-946fb8ae39ba1dc3.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f632234727179322.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-df7921033b292f8a.js"

Diff for image-465e16..f10b333ba.js

@@ -1645,7 +1645,7 @@
         domains: [],
         disableStaticImages: false,
         minimumCacheTTL: 60,
-        formats: ["image/avif", "image/webp"]
+        formats: ["image/webp"]
       };
       exports.imageConfigDefault = imageConfigDefault;

---

Default Build with SWC (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
buildDuration	6s	6.4s	⚠️ +376ms
buildDurationCached	2.9s	3.1s	⚠️ +192ms
nodeModulesSize	196 MB	196 MB	-65 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.172	3.286	⚠️ +0.11
/ avg req/sec	788.1	760.91	⚠️ -27.19
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.341	1.66	⚠️ +0.32
/error-in-render avg req/sec	1864.38	1506.47	⚠️ -357.91

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
450.fd3ad245..022b.js gzip	179 B	179 B	✓
675-228d3e2f..0c27.js gzip	13.8 kB	13.8 kB	-7 B
framework-13..70b0.js gzip	50.8 kB	50.8 kB	✓
main-d78cd7f..aaf4.js gzip	36.5 kB	36.5 kB	✓
webpack-a7f2..2650.js gzip	1.63 kB	1.63 kB	✓
Overall change	103 kB	103 kB	-7 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
_app-ae91bc3..d985.js gzip	1.33 kB	1.33 kB	✓
_error-273ac..9ef0.js gzip	180 B	180 B	✓
amp-5f9a7694..99ce.js gzip	315 B	315 B	✓
css-3a1b2477..df1e.js gzip	330 B	330 B	✓
dynamic-e04a..a1b5.js gzip	2.79 kB	2.79 kB	✓
head-7f600d0..daa3.js gzip	356 B	356 B	✓
hooks-bd8c02..0730.js gzip	638 B	638 B	✓
image-6365b7..7506.js gzip	536 B	536 B	✓
index-80be94..e89f.js gzip	262 B	262 B	✓
link-4ee1ea7..8745.js gzip	2.22 kB	2.22 kB	✓
routerDirect..c4aa.js gzip	325 B	325 B	✓
script-67da0..49e6.js gzip	390 B	390 B	✓
withRouter-2..2409.js gzip	322 B	322 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
_buildManifest.js gzip	477 B	476 B	-1 B
Overall change	477 B	476 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js change-avif-to-opt-in	Change
index.html gzip	535 B	535 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -13,7 +13,7 @@ self.__BUILD_MANIFEST = {
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
   "/image": [
-    "static\u002Fchunks\u002F675-7db1bce67c3eab1e.js",
+    "static\u002Fchunks\u002F675-fb08ab621ca30b4e.js",
     "static\u002Fchunks\u002Fpages\u002Fimage-bf3853b512dffdf0.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7111a5bd9b78e6ce.js"],

Diff for 675-7db1bce67c3eab1e.js

@@ -3259,7 +3259,7 @@
         domains: [],
         disableStaticImages: false,
         minimumCacheTTL: 60,
-        formats: ["image/avif", "image/webp"]
+        formats: ["image/webp"]
       };
       exports.imageConfigDefault = imageConfigDefault;

Commit: 4a4d7b5