Fix `layout="raw"` image element sizes prop #35809

atcastle · 2022-04-01T05:51:56Z

This fixes an issue with how the sizes prop was being applied to images with the experimental raw layout. The only effects were on the raw layout, so won't effect any non-experimental functionality.

styfle

Thanks!

ijjk · 2022-04-01T16:41:01Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
buildDuration	20s	21s	⚠️ +929ms
buildDurationCached	8.3s	7.9s	-404ms
nodeModulesSize	477 MB	477 MB	⚠️ +51 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.47	4.434	-0.04
/ avg req/sec	559.34	563.8	+4.46
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.319	2.35	⚠️ +0.03
/error-in-render avg req/sec	1077.86	1063.9	⚠️ -13.96

Client Bundles (main, webpack)

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.4 kB	28.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.05 kB	3.05 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.48 kB	5.48 kB	-4 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.7 kB	15.6 kB	-4 B

Client Build Manifests

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-fceff8aa5864bcb2.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3ea54d03e8ed2e01.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-a96e4060bca1ccfe.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"

Diff for image-HASH.js

@@ -880,7 +880,6 @@
           imgRef = _param.imgRef,
           placeholder = _param.placeholder,
           loading = _param.loading,
-          sizes = _param.sizes,
           srcString = _param.srcString,
           config = _param.config,
           unoptimized = _param.unoptimized,
@@ -898,7 +897,6 @@
             "imgRef",
             "placeholder",
             "loading",
-            "sizes",
             "srcString",
             "config",
             "unoptimized",
@@ -913,7 +911,7 @@
               {},
               rest,
               imgAttributes,
-              layout === "raw" && !sizes
+              layout === "raw" && !imgAttributes.sizes
                 ? {
                     height: heightInt,
                     width: widthInt
@@ -944,10 +942,10 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: sizes,
+                    sizes: imgAttributes.sizes,
                     loader: loader
                   }),
-                  layout === "raw" && !sizes
+                  layout === "raw" && !imgAttributes.sizes
                     ? {
                         height: heightInt,
                         width: widthInt

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
buildDuration	23.8s	24s	⚠️ +256ms
buildDurationCached	7.7s	8.1s	⚠️ +382ms
nodeModulesSize	477 MB	477 MB	⚠️ +51 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.34	4.418	⚠️ +0.08
/ avg req/sec	576.02	565.92	⚠️ -10.1
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.154	2.158	0
/error-in-render avg req/sec	1160.88	1158.61	⚠️ -2.27

Client Bundles (main, webpack)

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.8 kB	28.8 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.7 kB	72.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.03 kB	3.03 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.59 kB	5.59 kB	-1 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	388 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.8 kB	15.8 kB	-1 B

Client Build Manifests

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js fix-raw-height	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-fceff8aa5864bcb2.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3ea54d03e8ed2e01.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-a96e4060bca1ccfe.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"

Diff for image-HASH.js

@@ -880,7 +880,6 @@
           imgRef = _param.imgRef,
           placeholder = _param.placeholder,
           loading = _param.loading,
-          sizes = _param.sizes,
           srcString = _param.srcString,
           config = _param.config,
           unoptimized = _param.unoptimized,
@@ -898,7 +897,6 @@
             "imgRef",
             "placeholder",
             "loading",
-            "sizes",
             "srcString",
             "config",
             "unoptimized",
@@ -913,7 +911,7 @@
               {},
               rest,
               imgAttributes,
-              layout === "raw" && !sizes
+              layout === "raw" && !imgAttributes.sizes
                 ? {
                     height: heightInt,
                     width: widthInt
@@ -944,10 +942,10 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: sizes,
+                    sizes: imgAttributes.sizes,
                     loader: loader
                   }),
-                  layout === "raw" && !sizes
+                  layout === "raw" && !imgAttributes.sizes
                     ? {
                         height: heightInt,
                         width: widthInt

Commit: dafefbe

fix error in image element sizes prop

9661f95

atcastle requested review from timneutkens, ijjk, shuding, styfle and huozhi as code owners April 1, 2022 05:51

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Apr 1, 2022

This comment has been minimized.

Sign in to view

styfle approved these changes Apr 1, 2022

View reviewed changes

styfle changed the title ~~Fix error in image element sizes prop~~ Fix layout=raw image element sizes prop Apr 1, 2022

styfle changed the title ~~Fix layout=raw image element sizes prop~~ Fix layout="raw" image element sizes prop Apr 1, 2022

Merge branch 'canary' into fix-raw-height

778bd0f

This comment has been minimized.

Sign in to view

ijjk approved these changes Apr 1, 2022

View reviewed changes

Merge branch 'canary' into fix-raw-height

dafefbe

kodiakhq bot merged commit 352e60d into vercel:canary Apr 1, 2022

github-actions bot locked as resolved and limited conversation to collaborators May 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `layout="raw"` image element sizes prop #35809

Fix `layout="raw"` image element sizes prop #35809

atcastle commented Apr 1, 2022

This comment has been minimized.

styfle left a comment

This comment has been minimized.

ijjk commented Apr 1, 2022

Diffs

Diffs

Fix layout="raw" image element sizes prop #35809

Fix layout="raw" image element sizes prop #35809

Conversation

atcastle commented Apr 1, 2022

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Apr 1, 2022

Stats from current PR

Diffs

Diffs

Fix `layout="raw"` image element sizes prop #35809

Fix `layout="raw"` image element sizes prop #35809