Add missing `sizes` prop on image component #19128

styfle · 2020-11-12T22:45:46Z

ijjk · 2020-11-12T23:37:46Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
buildDuration	13.7s	13.2s	-563ms
nodeModulesSize	84.9 MB	84.9 MB	-616 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.37	2.531	⚠️ +0.16
/ avg req/sec	1054.83	987.87	⚠️ -66.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.241	1.358	⚠️ +0.12
/error-in-render avg req/sec	2014.01	1840.27	⚠️ -173.74

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..d9fb.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-43dd9e5..8439.js gzip	6.48 kB	6.48 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..dule.js gzip	8.23 kB	8.23 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-472f7d5..dule.js gzip	5.58 kB	5.58 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.5 kB	53.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
index.html gzip	972 B	972 B	✓
link.html gzip	977 B	977 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
buildDuration	15.5s	15.4s	-102ms
nodeModulesSize	84.9 MB	84.9 MB	-616 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..d9fb.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-43dd9e5..8439.js gzip	6.48 kB	6.48 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..dule.js gzip	8.23 kB	8.23 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-472f7d5..dule.js gzip	5.58 kB	5.58 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.5 kB	53.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_error.js	916 kB	916 kB	✓
404.html	4.61 kB	4.61 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	916 kB	916 kB	✓
link.js	974 kB	974 kB	✓
routerDirect.js	967 kB	967 kB	✓
withRouter.js	967 kB	967 kB	✓
Overall change	4.75 MB	4.75 MB	✓

Commit: c872694

ijjk · 2020-11-13T04:18:04Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
buildDuration	13.3s	13.5s	⚠️ +212ms
nodeModulesSize	84.9 MB	84.9 MB	-616 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.447	2.478	⚠️ +0.03
/ avg req/sec	1021.5	1008.87	⚠️ -12.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.282	1.328	⚠️ +0.05
/error-in-render avg req/sec	1949.66	1882.3	⚠️ -67.36

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..d9fb.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b87fa06..a51c.js gzip	6.5 kB	6.5 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..dule.js gzip	8.23 kB	8.23 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-b579897..dule.js gzip	5.6 kB	5.6 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.6 kB	53.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
index.html gzip	970 B	970 B	✓
link.html gzip	976 B	976 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
buildDuration	15s	15.1s	⚠️ +13ms
nodeModulesSize	84.9 MB	84.9 MB	-616 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..d9fb.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b87fa06..a51c.js gzip	6.5 kB	6.5 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
677f882d2ed8..dule.js gzip	8.23 kB	8.23 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-b579897..dule.js gzip	5.6 kB	5.6 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.6 kB	53.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js 18413-add-img-sizes	Change
_error.js	916 kB	916 kB	✓
404.html	4.61 kB	4.61 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	916 kB	916 kB	✓
link.js	974 kB	974 kB	✓
routerDirect.js	967 kB	967 kB	✓
withRouter.js	967 kB	967 kB	✓
Overall change	4.75 MB	4.75 MB	✓

Commit: bd5b56d

mnikolaus · 2020-11-13T08:11:12Z

@styfle is this designed to work with layout fill?

styfle · 2020-11-13T21:30:07Z

Yes you can assign sizes with layout=fill and layout=responsive.

If you omit layout but provide sizes, then layout=responsive is assumed.

neckaros · 2021-07-03T18:43:38Z

@styfle this has never been merged in master ?
I cannot see it in canary either

next.js/packages/next/client/image.tsx

Line 204 in 4fbf961

function generateImgAttrs({

that’s a great feature! And would ‘magically’ improve perf of a lot of website

Autogenerate sizes attr on image

43d5cbd

ijjk added the type: next label Nov 12, 2020

This comment has been minimized.

Sign in to view

styfle added 4 commits November 12, 2020 17:56

Fix src generation

c3fd403

Add tests for sizes

a679a13

Update docs

2f42766

Add test for sizes

ae8d848

ijjk added the type: documentation label Nov 12, 2020

vercel bot temporarily deployed to Preview November 12, 2020 23:15 Inactive

styfle changed the title ~~Autogenerate sizes attr on image~~ Add missing sizes prop on image component Nov 12, 2020

styfle marked this pull request as ready for review November 12, 2020 23:18

styfle requested review from Timer, chibicode, ijjk, lfades and timneutkens as code owners November 12, 2020 23:18

styfle requested a review from atcastle November 12, 2020 23:18

This comment has been minimized.

Sign in to view

Fix srcSet case sensitivity

c872694

vercel bot temporarily deployed to Preview November 12, 2020 23:28 Inactive

atcastle approved these changes Nov 12, 2020

View reviewed changes

styfle mentioned this pull request Nov 13, 2020

Image component sizes property does not work #18413

Closed

Timer approved these changes Nov 13, 2020

View reviewed changes

Merge branch 'canary' into 18413-add-img-sizes

3099dbc

vercel bot temporarily deployed to Preview November 13, 2020 03:35 Inactive

Merge branch 'canary' into 18413-add-img-sizes

bd5b56d

vercel bot temporarily deployed to Preview November 13, 2020 04:08 Inactive

kodiakhq bot merged commit 20ab351 into canary Nov 13, 2020

kodiakhq bot deleted the 18413-add-img-sizes branch November 13, 2020 04:30

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add missing `sizes` prop on image component #19128

Add missing `sizes` prop on image component #19128

Uh oh!

styfle commented Nov 12, 2020 •

edited by Timer

Loading

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 12, 2020

Uh oh!

ijjk commented Nov 13, 2020

Uh oh!

mnikolaus commented Nov 13, 2020

Uh oh!

styfle commented Nov 13, 2020

Uh oh!

neckaros commented Jul 3, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Add missing sizes prop on image component #19128

Add missing sizes prop on image component #19128

Uh oh!

Conversation

styfle commented Nov 12, 2020 • edited by Timer Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 12, 2020

Stats from current PR

Uh oh!

ijjk commented Nov 13, 2020

Stats from current PR

Uh oh!

mnikolaus commented Nov 13, 2020

Uh oh!

styfle commented Nov 13, 2020

Uh oh!

neckaros commented Jul 3, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Add missing `sizes` prop on image component #19128

Add missing `sizes` prop on image component #19128

styfle commented Nov 12, 2020 •

edited by Timer

Loading