Rename iconSizes to imageSizes, remove size limitation #18294

styfle · 2020-10-27T12:49:55Z

This does two things:

Rename iconSizes to imageSizes.
Give priority to imageSizes regardless of deviceSizes as a means to opt-out of the srcset behavior.

Timer · 2020-10-27T12:59:12Z

packages/next/client/image.tsx

@@ -87,8 +87,7 @@ function getDeviceSizes(width: number | undefined): number[] {
  if (typeof width !== 'number') {
    return configDeviceSizes
  }
-  const smallest = configDeviceSizes[0]
-  if (width < smallest && configIconSizes.includes(width)) {


What happened to this logic?

We found a use case where we would want to opt-out of the srcset behavior, even with a slightly larger image (for example 400px even though the smallest device is 320px)

A better solution might be a another property on the component but then you have two things you need to configure because we still need to know the device sizes

ijjk · 2020-10-27T13:00:27Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
buildDuration	12.8s	12.8s	-4ms
nodeModulesSize	91.3 MB	91.3 MB	-154 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.532	2.576	⚠️ +0.04
/ avg req/sec	987.43	970.64	⚠️ -16.79
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.51	1.635	⚠️ +0.13
/error-in-render avg req/sec	1655.69	1529.05	⚠️ -126.64

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b0b4491..c54e.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-6e1c435..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	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 image-rename-imageSizes	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..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-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
buildDuration	14.4s	14.3s	-110ms
nodeModulesSize	91.3 MB	91.3 MB	-154 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b0b4491..c54e.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-6e1c435..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	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 image-rename-imageSizes	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..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-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: 8f5f89e

ijjk · 2020-10-27T13:07:47Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
buildDuration	15.6s	14.1s	-1.5s
nodeModulesSize	91.3 MB	91.3 MB	-154 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.877	2.695	-0.18
/ avg req/sec	869.04	927.65	+58.61
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.674	1.42	-0.25
/error-in-render avg req/sec	1493.24	1760.09	+266.85

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b0b4491..c54e.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-6e1c435..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	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 image-rename-imageSizes	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..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-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
buildDuration	16.3s	16.1s	-243ms
nodeModulesSize	91.3 MB	91.3 MB	-154 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-b0b4491..c54e.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-6e1c435..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	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 image-rename-imageSizes	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..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-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js image-rename-imageSizes	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: 988e6dc

mxmtsk · 2020-10-27T18:27:08Z

Just fyi, the documentation still references iconSizes https://nextjs.org/docs/basic-features/image-optimization

Missed one rename from #18294

Rename iconSizes to imageSizes

8f5f89e

styfle requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 27, 2020 12:49

ijjk added type: documentation type: next labels Oct 27, 2020

timneutkens approved these changes Oct 27, 2020

View reviewed changes

Merge branch 'canary' into image-rename-imageSizes

988e6dc

Timer requested changes Oct 27, 2020

View reviewed changes

Timer approved these changes Oct 27, 2020

View reviewed changes

styfle changed the title ~~Rename iconSizes to imageSizes~~ Rename iconSizes to imageSizes, remove size limitation Oct 27, 2020

kodiakhq bot merged commit f773a1a into canary Oct 27, 2020

kodiakhq bot deleted the image-rename-imageSizes branch October 27, 2020 13:19

styfle mentioned this pull request Oct 27, 2020

Fix docs default config values #18319

Merged

kodiakhq bot pushed a commit that referenced this pull request Oct 27, 2020

Fix docs default config values (#18319)

3195de6

Missed one rename from #18294

This was referenced Oct 28, 2020

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 blubfoo/next.js#251

Open

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 blubfoo/next.js#252

Open

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 blubfoo/next.js#253

Open

timneutkens added the hacktoberfest-accepted label Nov 1, 2020

This was referenced Jan 12, 2022

[Snyk] Security upgrade next from 9.4.1 to 10.0.0 opendoor-labs/next.js#9

Closed

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 opendoor-labs/next.js#15

Closed

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 opendoor-labs/next.js#20

Closed

snyk-bot mentioned this pull request Jan 23, 2022

[Snyk] Security upgrade next from 9.5.5 to 10.0.0 opendoor-labs/next.js#37

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rename iconSizes to imageSizes, remove size limitation #18294

Rename iconSizes to imageSizes, remove size limitation #18294

styfle commented Oct 27, 2020 •

edited

Loading

Timer Oct 27, 2020

styfle Oct 27, 2020 •

edited

Loading

styfle Oct 27, 2020

ijjk commented Oct 27, 2020

ijjk commented Oct 27, 2020

mxmtsk commented Oct 27, 2020

Rename iconSizes to imageSizes, remove size limitation #18294

Rename iconSizes to imageSizes, remove size limitation #18294

Conversation

styfle commented Oct 27, 2020 • edited Loading

Timer Oct 27, 2020

Choose a reason for hiding this comment

styfle Oct 27, 2020 • edited Loading

Choose a reason for hiding this comment

styfle Oct 27, 2020

Choose a reason for hiding this comment

ijjk commented Oct 27, 2020

Stats from current PR

ijjk commented Oct 27, 2020

Stats from current PR

mxmtsk commented Oct 27, 2020

styfle commented Oct 27, 2020 •

edited

Loading

styfle Oct 27, 2020 •

edited

Loading