fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

lovell · 2024-05-16T10:35:06Z

What?

Upgrades sharp to the latest version and relies on more of its default settings (if the default settings are unsuitable, we should consider improving these for all users in sharp itself).

The sequentialRead setting is now managed for you based on each input image and the operations to be applied to it.
The concurrency detection is more accurate than os.cpus() as it now inspects things like CPU set/affinity as well as the memory allocator.
The (mostly archaic) concept of chroma subsampling is not required for AVIF output. Using full chroma should improve the quality of red/orange edges, as well as slightly reducing file size as it allows greater use of AV1 chroma-from-luma prediction.

In addition, this PR also enables the use of mozjpeg features such as trellis quantisation to produce smaller file sizes. The use of mozjpeg: true infers progressive: true. This aligns JPEG output behaviour with the previously-used squoosh, which always used mozjpeg.

/cc @styfle

ijjk · 2024-05-16T10:35:31Z

Allow CI Workflow Run

approve CI run for commit: 8e5e8dc

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

socket-security · 2024-05-16T12:39:23Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/sharp@0.33.4	environment Transitive: filesystem, shell	`+8`	736 kB	lovell

🚮 Removed packages: npm/sharp@0.33.3

View full report↗︎

styfle · 2024-05-16T13:32:50Z

if the default settings are unsuitable, we should consider improving these for all users in sharp itself

Agreed 💯

The sequentialRead setting is now managed for you based on each input image and the operations to be applied to it.

Perfect ✅

The concurrency detection is more accurate than os.cpus() as it now inspects things like CPU set/affinity as well as the memory allocator.

Can you share a link the PR that changed this behavior. I know this setting has caused lots of headaches for users, in particular OOM bugs. I also wonder if sharp would allow setting an env var to configure as an escape hatch?

The (mostly archaic) concept of chroma subsampling is not required for AVIF output. Using full chroma should improve the quality of red/orange edges, as well as slightly reducing file size as it allows greater use of AV1 chroma-from-luma prediction.

This is another one I am unsure of. I believe we saw the opposite - that the default behavior was producing large images and changing to 4:2:0 produced much smaller images and much faster. Did anything change here?

In addition, this PR also enables the use of mozjpeg features such as trellis quantisation to produce smaller file sizes.

Sounds good! Any reason that mozjpeg isn't the default behavior if its smaller file sizes?

ijjk · 2024-05-16T13:36:12Z

Tests Passed

styfle · 2024-05-16T13:45:53Z

You can see the test failing: should compress avif smaller than webp at q=75

https://github.com/vercel/next.js/actions/runs/9112415147/job/25054478801?pr=65846#step:28:331

lovell · 2024-05-16T14:13:29Z

Can you share a link the PR that changed this behavior. I know this setting has caused lots of headaches for users, in particular OOM bugs. I also wonder if sharp would allow setting an env var to configure as an escape hatch?

Memory allocator detection was added via lovell/sharp@5a9cc83 and the CPU affinity check is a recent change via https://gitlab.gnome.org/GNOME/glib/-/merge_requests/3784 (part of glib v2.80.0, as provided by sharp v0.33.4).

Control over this is also available via the VIPS_CONCURRENCY environment variable.

I wonder if some of those OOM problems were from encoding AVIF images with older versions of libaom?

This is another one I am unsure of. I believe we saw the opposite...

The failing test is creating a WebP image at a "quality" of 75, which will be approximately equivalent (structural similarity) to a non-subsampled AVIF of "quality" of ~50, so perhaps either the test needs updating or the default AVIF quality could be lowered?

-  const avifQuality = quality - 15
+  const avifQuality = quality - 25

Any reason that mozjpeg isn't the default behavior

There is a small performance hit, nowhere near as slow as AVIF compression times though, and still faster than squoosh. Given Next.js is caching images I think it's worth using for the improved file size.

styfle · 2024-05-16T14:48:54Z

Memory allocator detection was added via lovell/sharp@5a9cc83

That looks like it was merged in 2021 but the PR to limit concurrency in Next.js was merged in 2023.

Limit sharp's concurrency #53385

the CPU affinity check is a recent change via https://gitlab.gnome.org/GNOME/glib/-/merge_requests/3784 (part of glib v2.80.0, as provided by sharp v0.33.4).

This looks promising. However, isn't glib shipped in the OS and not sharp? Maybe I am misunderstanding.

or the default AVIF quality could be lowered?

That sounds reasonable if it leads to similar image size and encoding time prior to this PR 👍

lovell · 2024-05-16T20:47:34Z

the PR to limit concurrency in Next.js was merged in 2023.

Thanks for all the feedback. I've reverted to keep the existing concurrency logic (development = a quarter of the available CPU cores, production = half of the available CPU cores) but updated the calculation to use the originally-detected concurrency rather than os.cpus() and therefore respect cgroup settings. (Not respecting cgroup settings would explain some of the problems that #53385 was trying to address.)

isn't glib shipped in the OS and not sharp

Both; for most people the prebuilt binaries provide this, alternatively when using a globally-installed libvips the OS/Homebrew-provided glib will be used.

I've (hopefully) fixed the failing tests and the diffs demonstrate quite nicely the reduction in file size that using mozjpeg will bring.

I decided to err on the side of caution with the avifQuality calculation so e.g. 75 maps to 55. The previously failing test cases are passing again, and the file sizes involved are:

WebP 75 = 2552 bytes
AVIF 60 / 4:2:0 = 2500 bytes
AVIF 55 / 4:4:4 = 2281 bytes

(The image used by these tests has rather low entropy and may not be the best demonstration of the improvements that modern codecs such as AV1 bring.)

ijjk · 2024-05-16T21:49:09Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
buildDuration	16.9s	14.2s	N/A
buildDurationCached	7.9s	7.4s	N/A
nodeModulesSize	346 MB	346 MB	N/A
nextStartRea..uration (ms)	408ms	413ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
2141-HASH.js gzip	33.5 kB	33.5 kB	N/A
2592-HASH.js gzip	5.06 kB	5.06 kB	N/A
48cf7de5-HASH.js gzip	51 kB	51 kB	N/A
6539.HASH.js gzip	169 B	169 B	✓
framework-HASH.js gzip	56 kB	56 kB	N/A
main-app-HASH.js gzip	220 B	222 B	N/A
main-HASH.js gzip	32.3 kB	32.3 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	169 B	169 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	191 B	192 B	N/A
amp-HASH.js gzip	511 B	510 B	N/A
css-HASH.js gzip	341 B	341 B	✓
dynamic-HASH.js gzip	2.52 kB	2.53 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	363 B	365 B	N/A
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	268 B	266 B	N/A
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	326 B	N/A
script-HASH.js gzip	396 B	395 B	N/A
withRouter-HASH.js gzip	325 B	321 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.03 kB	1.03 kB	✓

Client Build Manifests

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
_buildManifest.js gzip	481 B	483 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
index.html gzip	521 B	521 B	✓
link.html gzip	535 B	534 B	N/A
withRouter.html gzip	516 B	518 B	N/A
Overall change	521 B	521 B	✓

Edge SSR bundle Size

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
edge-ssr.js gzip	121 kB	121 kB	N/A
page.js gzip	179 kB	179 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
middleware-b..fest.js gzip	658 B	657 B	N/A
middleware-r..fest.js gzip	156 B	155 B	N/A
middleware.js gzip	25.8 kB	25.8 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
app-page-exp...dev.js gzip	177 kB	177 kB	✓
app-page-exp..prod.js gzip	108 kB	108 kB	✓
app-page-tur..prod.js gzip	117 kB	117 kB	✓
app-page-tur..prod.js gzip	94.6 kB	94.6 kB	✓
app-page.run...dev.js gzip	160 kB	160 kB	✓
app-page.run..prod.js gzip	93.2 kB	93.2 kB	✓
app-route-ex...dev.js gzip	21.1 kB	21.1 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	20.9 kB	20.9 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.5 kB	21.5 kB	✓
pages.runtim...dev.js gzip	22 kB	22 kB	✓
pages.runtim..prod.js gzip	21.5 kB	21.5 kB	✓
server.runti..prod.js gzip	51.8 kB	51.8 kB	✓
Overall change	996 kB	996 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	lovell/next.js image-optimizer-prefer-sharp-defaults	Change
0.pack gzip	1.65 MB	1.65 MB	N/A
index.pack gzip	126 kB	127 kB	⚠️ +1.09 kB
Overall change	126 kB	127 kB	⚠️ +1.09 kB

Diff details

Diff for page.js

@@ -15,7 +15,7 @@
       /***/
     },
 
-    /***/ 1767: /***/ (
+    /***/ 5450: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -30,7 +30,7 @@
         default: () => /* binding */ nHandler,
       });
 
-      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       var page_next_edge_ssr_entry_namespaceObject = {};
       __webpack_require__.r(page_next_edge_ssr_entry_namespaceObject);
       __webpack_require__.d(page_next_edge_ssr_entry_namespaceObject, {
@@ -68,24 +68,24 @@
         tree: () => tree,
       });
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/web/globals.js
-      var globals = __webpack_require__(324);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
-      var adapter = __webpack_require__(6254);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
-      var render = __webpack_require__(3204);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
-      var incremental_cache = __webpack_require__(6676);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
-      var app_render = __webpack_require__(5306);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
-      var module_compiled = __webpack_require__(5474);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/future/route-kind.js
-      var route_kind = __webpack_require__(7884);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/client/components/error-boundary.js
-      var error_boundary = __webpack_require__(4280);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
-      var entry_base = __webpack_require__(487); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/web/globals.js
+      var globals = __webpack_require__(9325);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
+      var adapter = __webpack_require__(718);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
+      var render = __webpack_require__(6937);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
+      var incremental_cache = __webpack_require__(4895);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
+      var app_render = __webpack_require__(9177);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
+      var module_compiled = __webpack_require__(6527);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/future/route-kind.js
+      var route_kind = __webpack_require__(6569);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/client/components/error-boundary.js
+      var error_boundary = __webpack_require__(1177);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
+      var entry_base = __webpack_require__(2082); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       // We inject the tree and pages here so that we can use them in the route
       // module.
       const tree = {
@@ -102,7 +102,7 @@
                     page: [
                       () =>
                         Promise.resolve(/* import() eager */).then(
-                          __webpack_require__.bind(__webpack_require__, 7916)
+                          __webpack_require__.bind(__webpack_require__, 5885)
                         ),
                       "/tmp/next-statsi1HO0f/stats-app/app/app-edge-ssr/page.js",
                     ],
@@ -116,14 +116,14 @@
             layout: [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 129)
+                  __webpack_require__.bind(__webpack_require__, 1703)
                 ),
               "/tmp/next-statsi1HO0f/stats-app/app/layout.js",
             ],
             "not-found": [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 3205)
+                  __webpack_require__.bind(__webpack_require__, 2958)
                 ),
               "next/dist/client/components/not-found-error",
             ],
@@ -159,12 +159,12 @@
       });
 
       //# sourceMappingURL=app-page.js.map
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/lib/page-types.js
-      var page_types = __webpack_require__(7782);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/encryption-utils.js
-      var encryption_utils = __webpack_require__(6641);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/action-utils.js
-      var action_utils = __webpack_require__(3302); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzaTFITzBmL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiZWZmZWN0IiwiQGVmZmVjdC9zY2hlbWEiLCJAZWZmZWN0L3BsYXRmb3JtIiwiQGVmZmVjdC9wbGF0Zm9ybS1ub2RlIiwiQGVmZmVjdC9wbGF0Zm9ybS1icm93c2VyIiwiQGVmZmVjdC9wbGF0Zm9ybS1idW4iLCJAZWZmZWN0L3NxbCIsIkBlZmZlY3Qvc3FsLW1zc3FsIiwiQGVmZmVjdC9zcWwtbXlzcWwyIiwiQGVmZmVjdC9zcWwtcGciLCJAZWZmZWN0L3NxbC1zcXVsaXRlLW5vZGUiLCJAZWZmZWN0L3NxbC1zcXVsaXRlLWJ1biIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtd2FzbSIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtcmVhY3QtbmF0aXZlIiwiQGVmZmVjdC9ycGMiLCJAZWZmZWN0L3JwYy1odHRwIiwiQGVmZmVjdC90eXBlY2xhc3MiLCJAZWZmZWN0L2V4cGVyaW1lbnRhbCIsIkBlZmZlY3Qvb3BlbnRlbGVtZXRyeSIsIkBtYXRlcmlhbC11aS9jb3JlIiwiQG1hdGVyaWFsLXVpL2ljb25zIiwiQHRhYmxlci9pY29ucy1yZWFjdCIsIm11aS1jb3JlIiwicmVhY3QtaWNvbnMvYWkiLCJyZWFjdC1pY29ucy9iaSIsInJlYWN0LWljb25zL2JzIiwicmVhY3QtaWNvbnMvY2ciLCJyZWFjdC1pY29ucy9jaSIsInJlYWN0LWljb25zL2RpIiwicmVhY3QtaWNvbnMvZmEiLCJyZWFjdC1pY29ucy9mYTYiLCJyZWFjdC1pY29ucy9mYyIsInJlYWN0LWljb25zL2ZpIiwicmVhY3QtaWNvbnMvZ2kiLCJyZWFjdC1pY29ucy9nbyIsInJlYWN0LWljb25zL2dyIiwicmVhY3QtaWNvbnMvaGkiLCJyZWFjdC1pY29ucy9oaTIiLCJyZWFjdC1pY29ucy9pbSIsInJlYWN0LWljb25zL2lvIiwicmVhY3QtaWNvbnMvaW81IiwicmVhY3QtaWNvbnMvbGlhIiwicmVhY3QtaWNvbnMvbGliIiwicmVhY3QtaWNvbnMvbHUiLCJyZWFjdC1pY29ucy9tZCIsInJlYWN0LWljb25zL3BpIiwicmVhY3QtaWNvbnMvcmkiLCJyZWFjdC1pY29ucy9yeCIsInJlYWN0LWljb25zL3NpIiwicmVhY3QtaWNvbnMvc2wiLCJyZWFjdC1pY29ucy90YiIsInJlYWN0LWljb25zL3RmaSIsInJlYWN0LWljb25zL3RpIiwicmVhY3QtaWNvbnMvdnNjIiwicmVhY3QtaWNvbnMvd2kiXX0sImJ1bmRsZVBhZ2VzUm91dGVyRGVwZW5kZW5jaWVzIjpmYWxzZSwiY29uZmlnRmlsZSI6Ii90bXAvbmV4dC1zdGF0c2kxSE8wZi9zdGF0cy1hcHAvbmV4dC5jb25maWcuanMiLCJjb25maWdGaWxlTmFtZSI6Im5leHQuY29uZmlnLmpzIn0=","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzaTFITzBmJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/lib/page-types.js
+      var page_types = __webpack_require__(2086);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/encryption-utils.js
+      var encryption_utils = __webpack_require__(5069);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/action-utils.js
+      var action_utils = __webpack_require__(2009); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzaTFITzBmL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiZWZmZWN0IiwiQGVmZmVjdC9zY2hlbWEiLCJAZWZmZWN0L3BsYXRmb3JtIiwiQGVmZmVjdC9wbGF0Zm9ybS1ub2RlIiwiQGVmZmVjdC9wbGF0Zm9ybS1icm93c2VyIiwiQGVmZmVjdC9wbGF0Zm9ybS1idW4iLCJAZWZmZWN0L3NxbCIsIkBlZmZlY3Qvc3FsLW1zc3FsIiwiQGVmZmVjdC9zcWwtbXlzcWwyIiwiQGVmZmVjdC9zcWwtcGciLCJAZWZmZWN0L3NxbC1zcXVsaXRlLW5vZGUiLCJAZWZmZWN0L3NxbC1zcXVsaXRlLWJ1biIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtd2FzbSIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtcmVhY3QtbmF0aXZlIiwiQGVmZmVjdC9ycGMiLCJAZWZmZWN0L3JwYy1odHRwIiwiQGVmZmVjdC90eXBlY2xhc3MiLCJAZWZmZWN0L2V4cGVyaW1lbnRhbCIsIkBlZmZlY3Qvb3BlbnRlbGVtZXRyeSIsIkBtYXRlcmlhbC11aS9jb3JlIiwiQG1hdGVyaWFsLXVpL2ljb25zIiwiQHRhYmxlci9pY29ucy1yZWFjdCIsIm11aS1jb3JlIiwicmVhY3QtaWNvbnMvYWkiLCJyZWFjdC1pY29ucy9iaSIsInJlYWN0LWljb25zL2JzIiwicmVhY3QtaWNvbnMvY2ciLCJyZWFjdC1pY29ucy9jaSIsInJlYWN0LWljb25zL2RpIiwicmVhY3QtaWNvbnMvZmEiLCJyZWFjdC1pY29ucy9mYTYiLCJyZWFjdC1pY29ucy9mYyIsInJlYWN0LWljb25zL2ZpIiwicmVhY3QtaWNvbnMvZ2kiLCJyZWFjdC1pY29ucy9nbyIsInJlYWN0LWljb25zL2dyIiwicmVhY3QtaWNvbnMvaGkiLCJyZWFjdC1pY29ucy9oaTIiLCJyZWFjdC1pY29ucy9pbSIsInJlYWN0LWljb25zL2lvIiwicmVhY3QtaWNvbnMvaW81IiwicmVhY3QtaWNvbnMvbGlhIiwicmVhY3QtaWNvbnMvbGliIiwicmVhY3QtaWNvbnMvbHUiLCJyZWFjdC1pY29ucy9tZCIsInJlYWN0LWljb25zL3BpIiwicmVhY3QtaWNvbnMvcmkiLCJyZWFjdC1pY29ucy9yeCIsInJlYWN0LWljb25zL3NpIiwicmVhY3QtaWNvbnMvc2wiLCJyZWFjdC1pY29ucy90YiIsInJlYWN0LWljb25zL3RmaSIsInJlYWN0LWljb25zL3RpIiwicmVhY3QtaWNvbnMvdnNjIiwicmVhY3QtaWNvbnMvd2kiXX0sImJ1bmRsZVBhZ2VzUm91dGVyRGVwZW5kZW5jaWVzIjpmYWxzZSwiY29uZmlnRmlsZSI6Ii90bXAvbmV4dC1zdGF0c2kxSE8wZi9zdGF0cy1hcHAvbmV4dC5jb25maWcuanMiLCJjb25maWdGaWxlTmFtZSI6Im5leHQuY29uZmlnLmpzIn0=","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzaTFITzBmJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
       var _self___RSC_MANIFEST;
 
       const incrementalCacheHandler = null;
@@ -421,47 +421,47 @@
       /***/
     },
 
-    /***/ 7926: /***/ (
+    /***/ 4699: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4935)
+        __webpack_require__.bind(__webpack_require__, 1378)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 552)
+        __webpack_require__.bind(__webpack_require__, 2527)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 966)
+        __webpack_require__.bind(__webpack_require__, 961)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 6813)
+        __webpack_require__.bind(__webpack_require__, 1667)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 5371)
+        __webpack_require__.bind(__webpack_require__, 3963)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4430)
+        __webpack_require__.bind(__webpack_require__, 1399)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 934)
+        __webpack_require__.bind(__webpack_require__, 8559)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 6248)
+        __webpack_require__.bind(__webpack_require__, 6180)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 2038)
+        __webpack_require__.bind(__webpack_require__, 5413)
       );
 
       /***/
     },
 
-    /***/ 7799: /***/ () => {
+    /***/ 7698: /***/ () => {
       /***/
     },
 
-    /***/ 7916: /***/ (
+    /***/ 5885: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -481,7 +481,7 @@
       /***/
     },
 
-    /***/ 129: /***/ (
+    /***/ 1703: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -493,7 +493,7 @@
         /* harmony export */
       });
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(5433);
+        __webpack_require__(982);
 
       function RootLayout({ children }) {
         return /*#__PURE__*/ (0,
@@ -512,7 +512,7 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ __webpack_require__.O(0, [636, 450], () => __webpack_exec__(1767));
+    /******/ __webpack_require__.O(0, [781, 429], () => __webpack_exec__(5450));
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ (_ENTRIES = typeof _ENTRIES === "undefined" ? {} : _ENTRIES)[
       "middleware_app/app-edge-ssr/page"

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5498: /***/ (
+    /***/ 8536: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8082);
+          return __webpack_require__(3672);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 771: /***/ (module, exports, __webpack_require__) => {
+    /***/ 400: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(5614)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1549)
+        __webpack_require__(2537)
       );
-      const _getimgprops = __webpack_require__(6472);
-      const _imageconfig = __webpack_require__(6915);
-      const _imageconfigcontextsharedruntime = __webpack_require__(3993);
-      const _warnonce = __webpack_require__(3260);
-      const _routercontextsharedruntime = __webpack_require__(4781);
+      const _getimgprops = __webpack_require__(4031);
+      const _imageconfig = __webpack_require__(8267);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6469);
+      const _warnonce = __webpack_require__(5240);
+      const _routercontextsharedruntime = __webpack_require__(5635);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(933)
+        __webpack_require__(271)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 6472: /***/ (
+    /***/ 4031: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3260);
-      const _imageblursvg = __webpack_require__(7851);
-      const _imageconfig = __webpack_require__(6915);
+      const _warnonce = __webpack_require__(5240);
+      const _imageblursvg = __webpack_require__(2682);
+      const _imageconfig = __webpack_require__(8267);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -769,7 +769,7 @@
       /***/
     },
 
-    /***/ 7851: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2682: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 4770: /***/ (
+    /***/ 3669: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +851,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1478);
-      const _getimgprops = __webpack_require__(6472);
-      const _imagecomponent = __webpack_require__(771);
+      const _getimgprops = __webpack_require__(4031);
+      const _imagecomponent = __webpack_require__(400);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(933)
+        __webpack_require__(271)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +886,7 @@
       /***/
     },
 
-    /***/ 933: /***/ (__unused_webpack_module, exports) => {
+    /***/ 271: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +921,7 @@
       /***/
     },
 
-    /***/ 8082: /***/ (
+    /***/ 3672: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -938,8 +938,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-beta-04b058868c-20240508/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1847);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/image.js
-      var next_image = __webpack_require__(5945);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/image.js
+      var next_image = __webpack_require__(7037);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -969,12 +969,12 @@
       /***/
     },
 
-    /***/ 5945: /***/ (
+    /***/ 7037: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4770);
+      module.exports = __webpack_require__(3669);
 
       /***/
     },
@@ -984,7 +984,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5498)
+      __webpack_exec__(8536)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for main-HASH.js

Diff too large to display

Commit: e531a96

styfle · 2024-05-16T21:57:06Z

Thanks for all the feedback

Thank you for the PR!

updated the calculation to use the originally-detected concurrency rather than os.cpus() and therefore respect cgroup settings

Sounds good to me, thanks!

for most people the prebuilt binaries provide this,

Got it, I think the vast majority of users are going to be using prebuilt binaries given how slow building from source is.

I've (hopefully) fixed the failing tests and the diffs demonstrate quite nicely the reduction in file size that using mozjpeg will bring.

Ah yes, I was wondering why placeholders got larger when removing squoosh in PR #63321
This would explain it 😄

I decided to err on the side of caution with the avifQuality calculation so e.g. 75 maps to 55

If I remember correctly, higher quality is slower to encode and results in larger file sizes. This is a tricky one to get right because we don't want to slow things down too much but we also don't want to make the image look bad. So it sounds like the "err on the side of caution" in this case is ensuring the image doesn't look bad, is that correct?

The image used by these tests has rather low entropy and may not be the best demonstration of the improvements that modern codecs such as AV1 bring.

Indeed, we don't have a very good dataset of images in the test suite. Probably because something like quality is subjective and hard to test automatically.

lovell · 2024-05-17T09:34:58Z

So it sounds like the "err on the side of caution" in this case is ensuring the image doesn't look bad, is that correct?

Yes, here are the DSSIM values (lower is better) when compared with a lossless PNG version of the same 399x271 test image:

WebP 75 = 0.00172165
AVIF 50 = 0.00188916
AVIF 51 = 0.00175730
AVIF 52 = 0.00155333
AVIF 55 = 0.00130863

For the given image, a WebP "quality" of 75 is structurally equivalent to an AVIF "quality" between 51 and 52, so my original guesstimate of 50 wasn't that far off (I've clearly spent too long in this game) and using 55 provides a margin of safety.

(There are still some failing tests that I'm unsure are related to this change as they also appear to fail on the canary branch.)

styfle · 2024-05-17T20:50:39Z

Wonderful thanks!

Those CI failures look unrelated to your PR so I'll rerun now and see if they pass.

(this repo is under really heavy development the past few weeks 😄)

- Upgrades sharp to latest v0.33.4 - Use default concurrency detection instead of os.cpus() as it inspects things like CPU set/affinity as well as the memory allocator. - Prevents use of chroma subsampling for AVIF output, instead slightly reducing relative quality. This should improve the appearance of red/orange edges and reduce file size as AV1 chroma-from-luma prediction will work better. - There's no need to set sequentialRead as sharp now manages this for each input image and the operations in the pipeline. - Defaults JPEG output to use mozjpeg features such as trellis quantisation as these produce smaller file sizes. This should produce consistent output with squoosh at the same quality.

ijjk added the type: next label May 16, 2024

lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 670fea4 to 6405870 Compare May 16, 2024 12:38

lovell marked this pull request as ready for review May 16, 2024 12:42

lovell requested review from timneutkens, ijjk, shuding, styfle, huozhi, ztanner, a team, feedthejim and wyattjoh as code owners May 16, 2024 12:42

lovell requested review from timeyoutakeit and leerob and removed request for a team May 16, 2024 12:42

lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 6405870 to 8e5e8dc Compare May 16, 2024 20:22

ijjk added the tests label May 16, 2024

styfle added the CI approved Approve running CI for fork label May 16, 2024

lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 8e5e8dc to 725b4b0 Compare May 17, 2024 09:18

styfle approved these changes May 17, 2024

View reviewed changes

lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from a11e4a0 to e531a96 Compare May 18, 2024 09:28

styfle merged commit dd8ee52 into vercel:canary May 20, 2024
75 checks passed

lovell deleted the image-optimizer-prefer-sharp-defaults branch May 20, 2024 15:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

lovell commented May 16, 2024 •

edited

ijjk commented May 16, 2024 •

edited by styfle

socket-security bot commented May 16, 2024 •

edited

styfle commented May 16, 2024 •

edited

ijjk commented May 16, 2024 •

edited

styfle commented May 16, 2024 •

edited

lovell commented May 16, 2024

styfle commented May 16, 2024

lovell commented May 16, 2024

ijjk commented May 16, 2024 •

edited

styfle commented May 16, 2024

lovell commented May 17, 2024

styfle commented May 17, 2024

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

Conversation

lovell commented May 16, 2024 • edited

What?

ijjk commented May 16, 2024 • edited by styfle

socket-security bot commented May 16, 2024 • edited

styfle commented May 16, 2024 • edited

ijjk commented May 16, 2024 • edited

Tests Passed

styfle commented May 16, 2024 • edited

lovell commented May 16, 2024

styfle commented May 16, 2024

lovell commented May 16, 2024

ijjk commented May 16, 2024 • edited

Stats from current PR

styfle commented May 16, 2024

lovell commented May 17, 2024

styfle commented May 17, 2024

lovell commented May 16, 2024 •

edited

ijjk commented May 16, 2024 •

edited by styfle

socket-security bot commented May 16, 2024 •

edited

styfle commented May 16, 2024 •

edited

ijjk commented May 16, 2024 •

edited

styfle commented May 16, 2024 •

edited

ijjk commented May 16, 2024 •

edited