Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename iconSizes to imageSizes, remove size limitation #18294

Merged
merged 2 commits into from
Oct 27, 2020

Conversation

styfle
Copy link
Member

@styfle styfle commented Oct 27, 2020

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.

@@ -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)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happened to this logic?

Copy link
Member Author

@styfle styfle Oct 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

ijjk commented Oct 27, 2020

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

@styfle styfle changed the title Rename iconSizes to imageSizes Rename iconSizes to imageSizes, remove size limitation Oct 27, 2020
@ijjk
Copy link
Member

ijjk commented Oct 27, 2020

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

@kodiakhq kodiakhq bot merged commit f773a1a into canary Oct 27, 2020
@kodiakhq kodiakhq bot deleted the image-rename-imageSizes branch October 27, 2020 13:19
@mxmtsk
Copy link

mxmtsk commented Oct 27, 2020

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

This was referenced Sep 17, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants