Add support for AVIF to `next/image` #29683

styfle · 2021-10-06T23:22:40Z

Add support for AVIF to next/image

Feature

Implements an existing feature request
Related issues linked
Integration tests added
Documentation added
Update manifest output
Warn when sharp is outdated
Errors & Warnings have helpful link attached
Remove image-size in favor of squoosh/sharp (optional, need to benchmark)

leerob

Docs LGTM

errors/sharp-version-avif.md

ijjk · 2021-10-11T20:58:11Z

packages/next/server/image-optimizer.ts

+          if (transformer.avif) {
+            transformer.avif({ quality })
+          } else {
+            console.warn(


Should we wrap this in an execOnce so it doesn't log multiple times?

I was trying to decide if this should be warning or error and I picked the one in between: annoying warning every time.

It will only log when a device that supports AVIF visits the website that doesn't support AVIF so I guess it’s not every time.

docs/api-reference/next/image.md

Co-authored-by: JJ Kasper <[email protected]>

ijjk · 2021-10-11T22:31:03Z

Failing test suites

Commit: 32169e9

test/development/basic/hmr.test.ts

basic HMR > Error Recovery > should recover from errors in the render function
basic HMR > Error Recovery > should recover after exporting an invalid page
basic HMR > Error Recovery > should recover after undefined exported as default

Expand output

● basic HMR › Error Recovery › should recover from errors in the render function

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic/hmr.test.ts:455:9)

● basic HMR › Error Recovery › should recover after exporting an invalid page

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic/hmr.test.ts:510:9)

● basic HMR › Error Recovery › should recover after exporting an invalid page

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after exporting an invalid page 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about5"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  488 |
  489 |         expect(await hasRedbox(browser)).toBe(true)
> 490 |         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
      |                                                ^
  491 |           " 1 of 1 unhandled error
  492 |           Server Error
  493 |

  at Object.<anonymous> (development/basic/hmr.test.ts:490:48)

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  600 |         await next.patchFile(aboutPage, aboutContent)
  601 |
> 602 |         if (browser) {
      |                       ^
  603 |           await check(
  604 |             () => getBrowserBodyText(browser),
  605 |             /This is the about page/

  at Object.<anonymous> (development/basic/hmr.test.ts:602:23)

ijjk · 2021-10-11T22:53:41Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
buildDuration	12.3s	12.2s	-137ms
buildDurationCached	2.9s	2.8s	-77ms
nodeModulesSize	195 MB	195 MB	⚠️ +7.45 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.807	2.799	-0.01
/ avg req/sec	890.68	893.18	+2.5
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.286	1.293	⚠️ +0.01
/error-in-render avg req/sec	1944.1	1932.83	⚠️ -11.27

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27 kB	27 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.9 kB	70.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.12 kB	4.14 kB	⚠️ +20 B
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.9 kB	13 kB	⚠️ +20 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
_buildManifest.js gzip	494 B	493 B	-1 B
Overall change	494 B	493 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
index.html gzip	539 B	539 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-c1f9675770bff0c63be8.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-e464a773324a5820a436.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-19e6b3a207d8f370283a.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-962a2a330709d57cd073.js"],
   "/routerDirect": [

Diff for image-HASH.js

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

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
buildDuration	6.2s	6.1s	-80ms
buildDurationCached	2.8s	2.8s	⚠️ +21ms
nodeModulesSize	195 MB	195 MB	⚠️ +7.45 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.778	2.792	⚠️ +0.01
/ avg req/sec	899.88	895.28	⚠️ -4.6
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.303	1.305	0
/error-in-render avg req/sec	1919.35	1916.15	⚠️ -3.2

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
675-HASH.js gzip	13.8 kB	13.8 kB	⚠️ +19 B
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	35 kB	35 kB	✓
webpack-HASH.js gzip	1.64 kB	1.64 kB	✓
Overall change	101 kB	101 kB	⚠️ +19 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	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 feat-add-avif-next-image	Change
_app-HASH.js gzip	1.33 kB	1.33 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.79 kB	2.79 kB	✓
head-HASH.js gzip	355 B	355 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	555 B	555 B	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.22 kB	2.22 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js feat-add-avif-next-image	Change
index.html gzip	537 B	537 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-7fa8f6299881aeef4d92.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002F675-e36478c6435f19ec761d.js",
+    "static\u002Fchunks\u002F675-e9b1cbb7d10482282740.js",
     "static\u002Fchunks\u002Fpages\u002Fimage-24dfc0766459a85ca885.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-d5bdd3af9bbbd881abda.js"],

Diff for 675-HASH.js

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

Commit: a998241

Add support for AVIF to next/image

a7e20b1

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Oct 6, 2021

This comment has been minimized.

Sign in to view

Add support for next.config.js

1d0d931

ijjk added the type: documentation label Oct 7, 2021

styfle added the hacktoberfest-accepted label Oct 7, 2021

This comment has been minimized.

Sign in to view

Merge branch 'canary' into feat-add-avif-next-image

a3a63ad

This comment has been minimized.

Sign in to view

Add warning for outdated sharp version

7be073f

This comment has been minimized.

Sign in to view

Fix tests

5b9d12a

This comment has been minimized.

Sign in to view

Update docs

b733501

This comment has been minimized.

Sign in to view

Add workaround for "image-size" to blur avif

523c050

This comment has been minimized.

Sign in to view

Add avif to webpack-config

51bc319

ijjk added the examples Issue was opened via the examples template. label Oct 8, 2021

This comment has been minimized.

Sign in to view

Merge branch 'canary' into feat-add-avif-next-image

4446489

styfle requested a review from atcastle October 8, 2021 19:28

styfle requested a review from Timer October 8, 2021 19:28

styfle marked this pull request as ready for review October 8, 2021 19:28

styfle requested review from huozhi, ijjk, leerob, lfades, padmaia, shuding and timneutkens as code owners October 8, 2021 19:28

This comment has been minimized.

Sign in to view

leerob previously approved these changes Oct 9, 2021

View reviewed changes

ijjk reviewed Oct 11, 2021

View reviewed changes

errors/sharp-version-avif.md Outdated Show resolved Hide resolved

ijjk reviewed Oct 11, 2021

View reviewed changes

docs/api-reference/next/image.md Show resolved Hide resolved

Apply suggestions from ijjk

32169e9

Co-authored-by: JJ Kasper <[email protected]>

styfle dismissed leerob’s stale review via 32169e9 October 11, 2021 22:17

This comment has been minimized.

Sign in to view

Add note about fallback format

64d1a2a

styfle requested a review from ijjk October 11, 2021 22:32

ijjk approved these changes Oct 11, 2021

View reviewed changes

Merge branch 'canary' into feat-add-avif-next-image

a998241

kodiakhq bot merged commit cc1f3b8 into canary Oct 11, 2021

kodiakhq bot deleted the feat-add-avif-next-image branch October 11, 2021 23:17

ofhouse mentioned this pull request Oct 12, 2021

Add support for AVIF milliHQ/terraform-aws-next-js-image-optimization#73

Closed

2 tasks

styfle self-assigned this Oct 13, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for AVIF to `next/image` #29683

Add support for AVIF to `next/image` #29683

styfle commented Oct 6, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

leerob left a comment

ijjk Oct 11, 2021

styfle Oct 11, 2021 •

edited

Loading

This comment has been minimized.

ijjk commented Oct 11, 2021

ijjk commented Oct 11, 2021

Diffs

Diffs

Add support for AVIF to next/image #29683

Add support for AVIF to next/image #29683

Conversation

styfle commented Oct 6, 2021 • edited Loading

Feature

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

leerob left a comment

Choose a reason for hiding this comment

ijjk Oct 11, 2021

Choose a reason for hiding this comment

styfle Oct 11, 2021 • edited Loading

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Oct 11, 2021

Failing test suites

ijjk commented Oct 11, 2021

Stats from current PR

Diffs

Diffs

Add support for AVIF to `next/image` #29683

Add support for AVIF to `next/image` #29683

styfle commented Oct 6, 2021 •

edited

Loading

styfle Oct 11, 2021 •

edited

Loading